前端HTML代码
1 JavaScript代码
2 <script src="js/vue.js"></script>
3 <script src="js/jquery-3.2.1.min.js"></script>
4 <script>
5 var clickMyself = false;//用于标记是否我自己点击而产生对model一个改变
6 var myModel = {logoShow:true,keywordShow:false,word:'',inputDivStyle:'0 auto',keywordList:[],newsList:[]};
7
8
9 var myViewModel = new Vue({
10
11 el:"#mybody",
12 data: myModel,
13 methods : {
14
15 selectItem:function(item){
16 this.word=item.word;
17 this.keywordShow=false;
18 clickMyself = true;//标记一下，是我自己点击
19 }
20 },
21 computed:{
22
23 },
24 watch:{
25 word:function(){
26 if(clickMyself==true){
27 clickMyself = false;
28 console.log('客户自己选中，不是输入，此方法自动退出');
29 return;//如果是自己点击，就不用再去访问下面代码，避免重复访问后台
30 }
31 console.log('模型word的值变了');
32 this.logoShow=false;
33 this.inputDivStyle='10px';
34 //this.keywordShow=true;//移动到成功事件之后
35 $.ajax({
36 url:'ServiceAPI001.jsp',
37 type:'GET',
38 //data:clientInput,
39 dataType:'json',
40 timeout:3000,
41 success:function(result){
42 myModel.keywordShow=true;
43 myModel.keywordList = result.keywordList;
44 myModel.newsList = result.newsList;
45 //alert(result.keywordList);
46 //alert(result.bookList);
47 //myModel.bookList = result.bookList;
48 },
49 error:function(XMLHttpRequest, textStatus, errorThrown){
50 alert('服务器忙，请不要说脏话，理论上大家都是文明人');
51 alert(textStatus+XMLHttpRequest.status);
52 }
53 });
54 }
55 }
56 }) ;
57 </script>
1 <div id="mybody">
2 <div id="navigation_bar" v-if="logoShow">
3 <span>新闻</span><span>hao123</span><span>地图</span><span>视频</span><span>贴吧</span><span>学术</span><span>登录</span><span>设置</span>
4 </div>
5 <div id="logoDiv" v-if="logoShow">
6 <img src="img/bd_logo1.png" width="270" height="129"/>
7 </div>
8 <div id="inputDiv" v-bind:style="{margin:inputDivStyle}">
9 <input id="inputView" type="text" v-model="word"><input id="submitView" type="submit" value="百度一下">
10 <div id="keywordDiv" v-if="keywordShow">
11 <div v-for="item in keywordList" @click="selectItem(item)">{{item.word}}</div>
12 </div>
13 </div>
14 <div id="newListDiv">
15 <div v-for="item in newsList">
16 <div class="newsitem_title">{{item.title}}</div>
17 <div class="newsitem_desc">{{item.desc}}</div>
18 <div class="newsitem_href">{{item.href}}</div>
19 </div>
20
21 </div>
22
23 </div>
css代码
1 html,body{
2 width: 100%;/*默认值是0*/
3 height: 100%;/*默认值是0*/
4 margin: 0px;
5 padding: 0px;
6 }
7 #mybody{
8 width:100%;
9 height: 100%;
10 /*background-color:red;*/
11 }
12 #navigation_bar{
13 width: 100%;
14 height: 40px;
15 /*background-color: green;*/
16 text-align: right;/*文字内容靠右*/
17 line-height: 40px;/*保证文字的垂直方向居中*/
18 }
19 #navigation_bar span{
20 padding: 0px 10px 0px 0px;
21 font-size: 14px;
22 /*color:#333;*/
23 color:#404040;
24 }
25 #logoDiv{
26 width: 270px;
27 height: 129px;
28 /*background-color: blue;*/
29 margin: 0 auto; /* 布局居中的一种写法 */
30 }
31 #inputDiv{
32 width: 655px;
33 height: 180px;
34 /*background-color: yellow;*/
35 /*margin: 0 auto;此处不写，因为在后面进行绑定*//* 布局居中的一种写法 */
36 padding: 15px 0px 0px 0px;
37 }
38 #inputView{
39 border:solid 1px #4791ff;
40 width:530px;
41 height: 15px;
42 font-size: 16px;
43 padding: 10px;
44
45 }
46 #submitView{
47 width:98px;
48 height:37px;
49 border: solid 1px #4791ff;
50 background-color: #3385ff;
51 color: #ffffff;
52 font-size: 15px;
53 cursor: pointer;
54 }
55 #submitView:HOVER {
56 background-color: #317ef3;/*鼠标移动过去时，背景颜色发生变化*/
57 }
58 #keywordDiv{
59 width: 650px;
60 height: 100px;
61 background-color: #ffffff;
62 border: solid 1px #cccccc;
63 }
64 #keywordDiv div{
65 height: 20px;
66 line-height: 20px;
67 font-size: 16px;
68 font-weight: bold;
69 padding: 5px 0px 0px 5px;
70 }
71 .newsitem_title{
72 color: blue;
73 font-size: 16px;
74 padding: 10px 0px 0px 10px;
75 }
76 .newsitem_desc{
77 color: #666666;
78 font-size: 12px;
79 padding: 10px 0px 0px 10px;
80 }
81 .newsitem_href{
82 color: #528000;
83 font-size: 12px;
84 padding: 10px 0px 30px 10px;
85 }