（在此声明图片logo自己找！且放在一个img文件里）

文件名为test_copy.jsp

百度一下，你就知道(模仿)html,body{ width: 100%;/*默认值是0*/ height: 100%;/*默认值是0*/ margin: 0px; padding: 0px;}#mybody{ width:100%; height: 100%; /*background-color:red;*/}#navigation_bar{ width: 100%; height: 40px; /*background-color: green;*/ text-align: right;/*文字内容靠右*/ line-height: 40px;/*保证文字的垂直方向居中*/}#navigation_bar span{ padding: 0px 10px 0px 0px; font-size: 14px; /*color:#333;*/ color:#404040;}#logoDiv{ width: 270px; height: 129px; /*background-color: blue;*/ margin: 0 auto; /* 布局居中的一种写法 */}#inputDiv{ //width: 655px; //width: 855px; height: 180px; /*background-color: yellow;*/ /*margin: 0 auto;此处不写，因为在后面进行绑定*//* 布局居中的一种写法 */ //padding: 15px 0px 0px 0px;}#inputView{ border:solid 1px #4791ff; width:530px; height: 15px; font-size: 16px; padding: 10px; }#submitView{ width:98px; height:37px; border: solid 1px #4791ff; background-color: #3385ff; color: #ffffff; font-size: 15px; cursor: pointer;}#submitView:HOVER { background-color: #317ef3;/*鼠标移动过去时，背景颜色发生变化*/}#keywordDiv{ position:relative; left:124px; //width: 50px; width: 550px; height: 100px; background-color: #ffffff; //background-color: yellow; border: solid 1px #cccccc;}#keywordDiv div{ width: 500px; height: 20px; line-height: 20px; font-size: 16px; font-weight: bold; padding: 5px 0px 0px 5px;}.newsitem_title{ color: blue; font-size: 16px; padding: 10px 0px 0px 10px; position: relative;    left: 125px;}.newsitem_desc{ color: #666666; font-size: 12px; padding: 10px 0px 0px 10px; position: relative;    left: 125px;}.newsitem_href{ color: #528000; font-size: 12px; //padding: 10px 0px 30px 10px; position: relative;    left: 135px; padding: 0; margin: 0;}   新闻hao123地图视频贴吧学术登录设置               {{item.word}}         {{item.title}}   {{item.desc}}   {{item.href}}     var clickMyself = false;//用于标记是否我自己点击而产生对model一个改变var myModel = {logoShow:true,keywordShow:false,imgShow:false,contentDiv:false,word:'',inputDivStyle:'0 auto',inputwidth:'655px',keywordList:[],newsList:[]};var myViewModel = new Vue({ el:'#mybody', data:myModel, methods:{  selectItem:function(item){   myModel.contentDiv=true;   myModel.word=item.word;   myModel.keywordShow=false;   myModel.inputwidth='855px';   clickMyself = true;//标记一下，是我自己点击  } }, computed:{   }, watch:{  word:function(){   if(clickMyself==true){    clickMyself = false;    console.log('客户自己选中，不是输入，此方法自动退出');    return;//如果是自己点击，就不用再去访问下面代码，避免重复访问后台   }   console.log('模型word的值变了');   this.logoShow=false;   this.inputDivStyle='10px';   //this.keywordShow=true;//移动到成功事件之后   $.ajax({    url:'ServiceAPI001.jsp',    type:'GET',    //data:clientInput,    dataType:'json',    timeout:2500,    success:function(result){     myModel.keywordShow=true;     myModel.imgShow=true;     myModel.keywordList = result.keywordList;     myModel.newsList = result.newsList;     myModel.inputwidth='855px';     //alert(result.keywordList);     //alert(result.bookList);     //myModel.bookList = result.bookList;    },    error:function(XMLHttpRequest, textStatus, errorThrown){     alert('服务器忙，请刷新页面');     alert(textStatus+XMLHttpRequest.status);    }   });  } }});

-----------------------------------------------------------------------------------

后台为以下代码（写死的json）

文件名为：ServiceAPI001.jsp

{"keywordList":[{"word":"刘亦菲重返校园"},{"word":"刘亦菲"},{"word":"刘德华"},{"word":"刘诗诗"}],"newsList":[{"title":"新闻标题1","desc":"内容描述1","href":"http://xxx/link1.jsp"},{"title":"新闻标题2","desc":"内容描述2","href":"http://xxx/link2.jsp"},{"title":"新闻标题3","desc":"内容描述3","href":"http://xxx/link3.jsp"}]}