一. Vue使用 https://cn.vuejs.org/v2/guide/routing.html
1、引入vue.js
2. vue基本基本雏形
<!--导入vue--> <script src="js/vue.js"></script> <script> new Vue({ el:'ccs选择器' }) </script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> // =========基本vue的用法模板=========== window.onload=function (){ var vm=new Vue({ //第一步vue 一个实例 el:'#box', data:{ //第二步展示数据 msg:'welcom to' } }); }; </script> </head> <body> <div id="box"> {{msg}} <!--/第三 步 展示结果--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012022253176-305166930.png)
3. v-model 指令 一般用于表单的双向数据绑定(v-model:把input的值和变量绑定了,实现)
v-model:把input的值和变量绑定了,实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> <style> .cccc{ display: none; } </style> </head> <body> <div id="app"> <div> <input type="text" placeholder="姓名" v-model="username"> <input type="text" placeholder="年龄" v-model="age"> <input type="text" v-model="msg" class="cccc"> <input type="submit" value="添加" @click="add"> </div> <div> <table cellpadding="0" border="1"> <tr v-for="(item,index) in arr"> <td><input type="text" v-model="item.username"></td> <td><input type="text" v-model="item.age"></td> <td><input type="button" value="删除" @click="del(index)"></td> <td><input type="button" @click="edit(index)" v-model="item.msg"></td> </tr> </table> </div> </div> <script> new Vue({ el:"#app", //表示当前这个元素开始使用vue data:{ username:"", age:"", //变量的初始化 arr:[], msg:"编辑" }, methods:{ add:function () { this.arr.push( { "username":this.username, "age":this.age, "msg":this.msg } ); console.log(this.arr) //打印的是一个数组 }, del:function (index) { this.arr.splice(index,1); //删除索引对应的哪一个值 }, edit:function (index) { console.log(index); if (this.arr[index].msg=="保存"){ // alert(this.arr[index].msg); this.arr[index].msg="编辑"; }else{ this.arr[index].msg="保存"; } } } }) </script> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012133751653-1409522386.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012133814151-220764849.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012134055440-1038755717.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //v-model 指令 一般用于表单的双向数据绑定 window.onload=function (){ var vm=new Vue({ //第一步vue 一个实例 el:'#box',//放的是选择器 data:{ //第二步展示数据 msg:'welcome to haid' } }); }; </script> </head> <body> <div id="box"> {{msg}} <!--/第三 步 展示结果--> <br /> <input type="text" v-model="msg"> <!-- //v-model 指令--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012022313199-1624816091.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //v-model 指令 一般用于表单的双向数据绑定 window.onload=function (){ var vm=new Vue({ //第一步vue 一个实例 el:'#box', //放的是选择器 data:{ //第二步展示数据 msg:'welcome to haid', msg2:'卧槽你你你你你', msg3:true, arr:['apple','bannna','orange','pera'], json:{a:'apple',b:'hshshh',c:'wocooow'} } }); }; </script> </head> <body> <div id="box"> {{msg}} <!--/第三 步 展示结果--> <br /> {{msg3}} <br /> {{msg2}} <br/> {{arr}} <br /> {{json}} <br/> <input type="text" v-model="msg"> <!-- //v-model 指令--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012022504716-2006515389.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input v-model="msg"> <input v-model="msg" value="this is test"> <p>{{msg}}</p> <input type="button" value="点击变化" @click="change"> <!--事件绑定--> </div> <script> new Vue({ el:"#app", //表示当前这个元素开始使用vue data:{ // msg:"", msg:"aaaaa" }, methods:{ change:function () { this.msg=512 } } }); </script> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012023835342-1961821648.png)
4. v-for:根据变量的值来循环渲染元素 (循环-重复数据)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr" track-by="$index"> <!--//提高循环性能track-by='索引' 提高循环性能--> {{val}} </li> </ul> </div> <script> //循环: // v-for="value in data" // // 会有重复数据? // track-by='索引' 提高循环性能 // // track-by='$index/uid var vm=new Vue({ data:{ arr:['apple','pear','orange'] }, methods:{ add:function(){ this.arr.push('tomato'); } } }).$mount('#box'); </script> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012151222497-1511699203.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012151248551-1575751437.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> </script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </div> <script> //循环: // v-for="value in data" // // 会有重复数据? // track-by='索引' 提高循环性能 // // track-by='$index/uid var vm=new Vue({ data:{ arr:['apple','pear','orange'] }, methods:{ add:function(){ this.arr.push('tomato','哦哦哦哦哦哦哦哦哦'); } } }).$mount('#box'); </script> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012150954005-99571994.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012151013725-1122706168.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //v-for ================= 循环================ window.onload=function (){ var vm=new Vue({ //第一步vue 一个实例 el:'#box', //放的是选择器 data:{ //第二步展示数据 arr:['apple','bannna','orange','pera'], json:{a:'apple',b:'hshshh',c:'wocooow'} } }); }; </script> </head> <body> <div id="box"> <ul> <li v-for="value in arr"> {{value}} </li> </ul> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012022745327-1070124807.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> <style> ul li{ list-style: none; } </style> </head> <body> <div id="app"> <ul> <li v-for="item in arr"> <!-- 对一个数组的循环 --> <!--循环方式四--> {{ item }} </li> </ul> <ul> <li v-for="(item,index) in arr"> <!-- 循环方式三--> {{ item }}:{{index}} </li> </ul> <ul> <li v-for="item in obj"> {{ item }} </li> </ul> <ul> <li v-for="(item,key,index) in obj"> <!--循环方式二--> {{ item }}:{{ key }}:{{ index }} </li> </ul> <ul> <li v-for="item in obj2"> <!--循环方式一--> {{ item.username }} {{ item.age }} {{ item.sex }} </li> </ul> <div v-for="i in 8"> <!--循环8次,打印1 2 3 4 5 6 7 8 --> {{ i }} </div> </div> <script> var vm = new Vue({ el:"#app", data:{ arr:[11,22,33,34], obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"}, obj2:[ {username:"jason"}, {age:20}, {sex:"male"} ] } }) </script> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012023427150-1030445576.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //v-for ================= 循环================ window.onload=function (){ var vm=new Vue({ //第一步vue 一个实例 el:'#box', //放的是选择器 data:{ //第二步展示数据 arr:['apple','bannna','orange','pera'], json:{a:'apple',b:'hshshh',c:'wocooow'} } }); }; </script> </head> <body> <div id="box"> <ul> <li v-for="value in arr"> <!--循环数组--> {{value}} <!--//{{$index}} 是vue的索引--> </li> </ul> <hr /> <ul> <li v-for="aa in json"> <!--循环json数据--> {{aa}} {{$index}} {{$key}} <!--//{{$index}} 是vue的索引--> <!--{{$key}}是获取 json数据中名--> </li> </ul> <hr /> <ul> <li v-for="(k,V) in json"> <!--循环json数据--> {{k}} {{v}} {{$index}} {{$key}} <!--//{{$index}} 是vue的索引--> <!--{{$key}}是获取 json数据中名--> </li> </ul> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012024021588-2123502428.png)
5. v-on:click 点击事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //v-for ================= 点击事件 v-on:click="" ============= window.onload=function (){ var vm=new Vue({ //第一步vue 一个实例 el:'#box', //放的是选择器 data:{ //第二步展示数据 arr:['apple','bannna','orange','pera'], json:{a:'apple',b:'hshshh',c:'wocooow'} }, methods:{ //事件方法methods show:function (){ alert('holle,welcom'); } } }); }; </script> </head> <body> <div id="box"> <ul> <li v-for="aa in arr"> {{aa}} {{$index}} {{$key}} </li> </ul> <input type="button" value="按钮" v-on:click="show()"> <!--//v-on:click="show()"事件点击--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012024657604-657200372.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue事件</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //v-for ================= 点击事件 v-on:click="" ============= window.onload=function (){ var vm=new Vue({ //第一步vue 一个实例 el:'#box', //放的是选择器 data:{ //第二步展示数据 arr:['apple','bannna','orange','pera'], json:{a:'apple',b:'hshshh',c:'wocooow'} }, methods:{ //事件方法methods add:function (){ this.arr.push('orenger','welcome','to'); //这个this就表示 vm } } }); }; </script> </head> <body> <div id="box"> <input type="button" value="按钮" v-on:click="add()"> <!--//v-on:click="show()"事件点击--> <br /> <ul> <li v-for="ss in arr"> {{ss}} </li> </ul> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012024950704-1186491.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012025014793-1604008625.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue事件</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //v-for ================= 点击事件 v-on:click="" ============= window.onload=function (){ var vm=new Vue({ //第一步vue 一个实例 el:'#box', //放的是选择器 data:{ //第二步展示数据 arr:['apple','bannna','orange','pera'], json:{a:'apple',b:'hshshh',c:'wocooow'} }, methods:{ //事件方法methods add:function (){ this.arr.push('orenger','welcome','to'); //这个this就表示 vm } } }); }; </script> </head> <body> <!-- v-on:click/mouseout/mouseover/dblclick/mousedown.....--> <div id="box"> <!-- 事件有mouserover mouseout mousedown--> <input type="button" value="按钮" v-on:click="add()"> <!--//v-on:click="show()"事件点击--> <br /> <ul> <li v-for="ss in arr"> {{ss}} </li> </ul> </div> </body> </html>
6. v-show 显示隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue事件</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //v-for ================= 点击事件 v-on:click="" ============= window.onload=function(){ new Vue({ el:'#box', data:{ //数据 a:true } }); }; </script> </head> <body> <div id="box"> <input type="button" value="按钮" v-on:click="a=false"> <!--显示隐藏: v-show=“true/false”--> <div style="width:100px; height:100px; background: red" v-show="a"> <!--v-show显示隐藏-- > </div> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012025435877-870895577.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012025454088-1460979470.png)
v-show:根据表达式的真假值来显示和隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p v-if="pick">我是海燕</p> <p v-show="temp">呼啦啦呼啦啦</p> <p v-show="ok">你喜欢我吗?</p> </div> <script> var vm = new Vue({ el:"#app", //表示当前这个元素开始使用vue data:{ // pick:true //显示 pick:false, //移除,用注释给替换了 // temp :true , //显示 temp :false, //隐藏 ok:true } }); window.setInterval(function() { vm.ok =! vm.ok; },6000) //1000代表1秒 </script> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012025919716-664327593.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012025934986-1854357652.png)
7. $event 事件深入理解事件对象(事件冒泡)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> // =====================事件深入理解事件对象===$event================= window.onload=function (){ var vm=new Vue({ el:'#box', data:{ msg:'welcom to' }, methods:{ add:function (ev){ alert(ev.clientX); } } }); }; </script> </head> <body> <div id="box"> <!-- //$event事件对象--> <input type="button" value="点击" @click="add($event)"/> <!--// @click 是 v-on:click的简写哈哈哈 --> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012130521007-1238779544.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012130535064-1480936149.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> // =====================事件深入理解事件对象===$event=== 传参数============== window.onload=function (){ var vm=new Vue({ el:'#box', data:{ msg:'welcom to' }, methods:{ add:function (ev,b){ alert(ev.clientX); alert(b); } } }); }; </script> </head> <body> <div id="box"> <!-- //$event事件对象--> <input type="button" value="点击" @click="add($event,1111)"/> <!--// @click 是 v-on:click的简写哈哈哈 --> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012130835976-688353800.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012130848738-852998678.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012130913466-1547627003.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //事件冒泡 // =====================事件深入理解事件对象===$event=== 传参数============== window.onload=function (){ var vm=new Vue({ el:'#box', data:{ msg:'welcom to' }, methods:{ add:function (){ alert(1111111111111); }, add2:function(){ alert(2222222222222222); } } }); }; </script> </head> <body> <!--事件冒泡哈哈哈哈--> <!--先弹出11111111 在弹出22222222--> <div id="box"> <div @click="add2()"> <input type="button" value="点击" @click="add()"/> </div> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012131221465-336946844.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012131234243-324011755.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012131254049-1331103726.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //事件冒泡 阻止事件冒泡-----方法一 // =====================事件深入理解事件对象===$event=== 传参数============== window.onload=function (){ var vm=new Vue({ el:'#box', data:{ msg:'welcom to' }, methods:{ add:function (ev){ alert(1111111111111); ev.cancelBubble=true; //阻止事件冒泡 就是不让2222222弹出 直接弹出11111111 方法一 }, add2:function(){ alert(2222222222222222); } } }); }; </script> </head> <body> <!--事件冒泡哈哈哈哈--> <!--先弹出11111111 在弹出22222222--> <div id="box"> <div @click="add2()"> <input type="button" value="点击" @click="add($event)"/> <!-- 事件对象$event--> </div> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012131525691-294038436.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012131543419-254975318.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //事件冒泡 阻止事件冒泡-----方法二推荐使用 // =====================事件深入理解事件对象===$event=== 传参数============== window.onload=function (){ var vm=new Vue({ el:'#box', data:{ msg:'welcom to' }, methods:{ add:function (){ alert(1111111111111); //ev.cancelBubble=true; //阻止事件冒泡 就是不让2222222弹出 直接弹出11111111 方法二 }, add2:function(){ alert(2222222222222222); } } }); }; </script> </head> <body> <!--事件冒泡哈哈哈哈--> <!--先弹出11111111 在弹出22222222--> <div id="box"> <div @click="add2()"> <input type="button" value="点击" @click.stop="add()"/> <!--在这里用stop也可以阻止事件冒泡 不传事件对象$event --> </div> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012131717506-1575445274.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012131732188-1716013921.png)
8. preventDefault() 阻止事件默认行为
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //===========默认行为==============原生的方法一===== window.onload=function (){ var vm=new Vue({ el:'#box', data:{ msg:'welcom to' }, methods:{ add:function (ev){ alert(1111111111111); ev.preventDefault();//阻止事件默认行为 原生的 } } }); }; </script> </head> <body> <!--事件默认行为哈哈哈哈--> <div id="box"> <input type="button" value="点击" @contextmenu="add($event)"/> <!--//$event事件对象--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012132003782-2051885873.png)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue基本雏形</title> <script type="text/javascript" src="vue.js" ></script> <script type="text/javascript"> //===========默认行为=============vue提供的方法=推荐===== window.onload=function (){ var vm=new Vue({ el:'#box', data:{ msg:'welcom to' }, methods:{ add:function (){ alert(1111111111111); //ev.preventDefault();//阻止事件默认行为 } } }); }; </script> </head> <body> <!--事件默认行为哈哈哈哈--> <!-- vue提供的方法 --> <div id="box"> <input type="button" value="点击" @contextmenu.prevent="add()"/> <!--prevent阻止默认行为--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012132144428-527029466.png)
9. v-bind:绑定元素的属性并执行相应的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> <style> .bk_1{ width: 100px; height: 100px; background-color: silver; } .bk2_2{ width: 100px; height: 100px; background-color: darkorange; } .bk_3{ border: 5px solid #000; } </style> </head> <body> <div id="app"> <a href="http://www.baidu.com" v-bind:title="msg">腾讯</a> <!--绑定标题--> <a href="http://www.baidu.com" title="啦啦啦">点我</a> <!--绑定标题--> <div v-bind:class="bk"></div> <div v-bind:class="bk2"></div> <div :class="{bk_1:temp,bk_3:temp}">加油,吧</div> <!-- #temp一定是一个布尔值,为true是就使用bk_2,为false就不为他--> <div :class="[bk2,bk3]"></div> <!--如果是多个类就用[bk1,bk2,],就显示两个类的样式--> </div> <script> var vm = new Vue({ el:"#app",//表示在当前这个元素开始使用VUe data:{ msg:"我想去腾讯上班", bk:"bk_1", bk2:"bk2_2", bk3:"bk_3", // temp: false, temp: true } }) </script> </body> </html>
10. v-text:在元素当中插入值 插入html:v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p>{{msg}}</p> <p>{{ 80+2 }}</p> <p>{{ 20>30 }}</p> <h1 v-text="msg"></h1> <h1 v-html="hd"></h1> <h1 v-html="str"></h1> </div> <script> new Vue({ el:"#app", //表示当前这个元素开始使用vue data:{ msg:"你好啊", hd:"<input type='button' value='啦啦'>", str:"你妹的" } }) </script> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012133231880-2035463346.png)
11. 绑定claas属性 style添加属性--> 推荐使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ //class属性 //属性比如说id style class src 等 // v-bind vue中获属性 new Vue({ el:'#box', data:{ aa:'red' //这是绑定claas属性 }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :class="[aa]">文字...</strong> <!-- -、//调用了 data中的数据--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012135057424-587162136.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ //class属性 //属性比如说id style class src 等 // v-bind vue中获属性 new Vue({ el:'#box', data:{ cc:'red', aa:'blue' //这是绑定claas属性 }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :class="[cc,aa]">文字...</strong> <<!-- -、//调用了 data中的数据-->--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012135151815-611742428.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ //class属性 //属性比如说id style class src 等 // v-bind vue中获属性 new Vue({ el:'#box', data:{ }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :class="{red:true,blue:true}">文字...</strong> <!-- //使用布尔值来添加clas属性--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012135313195-199552817.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ //class属性 //属性比如说id style class src 等 // v-bind vue中获属性 // 使用 JSON new Vue({ el:'#box', data:{ json:{ red:true, blue:true } }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :class="json">文字...</strong> <!--使用json来调用--><!-- -、//调用了 data中的数据--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012135429961-46579635.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ // <!--用style添加属性--> 推荐使用 new Vue({ el:'#box', data:{ a:{ color:'red', backgroundColor:'gray' } }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :style="a">文字...</strong> <!--直接添加方法--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012135804290-61825949.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ // ========= style属性 ========= el:'#box', data:{ c:{color:'red'}, b:{backgroundColor:'blue'} }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :style="[c,b]">文字...</strong> <!--用style添加属性--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012135922806-1721060441.png)
12. 模板 {{msg}}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ msg:'abc' } }); }; </script> </head> <body> <div id="box"> <input type="text" v-model="msg"> <br> {{msg}} <br> {{*msg}} </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012141651309-1882657644.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012141706572-1194067843.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ // 模板: // {{msg}} 数据更新模板也更新 // {{*msg}} 数据只绑定一次 // // {{{msg}}} HTML转意输出 new Vue({ el:'#box', data:{ msg:'abc' } }); }; </script> </head> <body> <div id="box"> <input type="text" v-model="msg"> <br> {{msg}}<!--更新模板也更新--> <br> {{*msg}} <!-- 数据只能绑定一次但是不更新--> <br> {{{msg}}} <!----HTML转意输出 就是指html的关键符号转义输出--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012141852340-426414588.png)
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012141911063-125237755.png)
13. 获取属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ //属性比如说id style class src 等 // v-bind vue中获属性 // v-bind vue中获属性的简写 : new Vue({ el:'#box', data:{ url:'https://www.baidu.com/img/bd_logo1.png' }, methods:{ } }); }; </script> </head> <body> <div id="box"> <!--<img src="{{url}}" alt="">--> <img :src="url" alt=""> <!--//这是获取属性的简写--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012142205105-1764076444.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ //属性比如说id style class src 等 // v-bind vue中获属性 // v-bind vue中获属性的简写 : new Vue({ el:'#box', data:{ url:'https://www.baidu.com/img/bd_logo1.png', w:'700px', t:'这是一张美丽的图片' }, methods:{ } }); }; </script> </head> <body> <div id="box"> <!--<img src="{{url}}" alt="">--> <img :src="url" alt="" :width="w" :title="t"> <!--//这是获取属性的简写--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012142308653-461772127.png)
14. vue数据交互的三种形式 post get jsonp 三种形式 (vue-resource.js)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ //vue数据交互的三种形式 post get jsonp 三种形式 /*vue 交互 使用 $http 就是 $http 的ajax对象 必须引用vue-resource.js框架 做交互*/ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.get('a.txt').then(function(res){ alert(res.data); },function(res){ alert(res.data); }); } } }); }; </script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012142528770-1584519824.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ //get 获取文本数据 //vue数据交互的三种形式 post get jsonp 三种形式 /*vue 交互 使用 $http 就是 $http 的ajax对象 必须引用vue-resource.js框架 做交互*/ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.get('aa.txt').then(function(res){ alert(res.data); },function(res){ alert(res.status); }); } } }); }; </script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012142709397-641332053.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ //get发送数据 是给服务器发送 //vue数据交互的三种形式 post get jsonp 三种形式 /*vue 交互 使用 $http 就是 $http 的ajax对象 必须引用vue-resource.js框架 做交互*/ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.get('get.php',{ a:1, //数据 b:2 }).then(function(res){ alert(res.data); },function(res){ alert(res.status); }); } } }); }; </script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012142919304-970414246.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ //post发送数据 是给服务器发送 //vue数据交互的三种形式 post get jsonp 三种形式 /*vue 交互 使用 $http 就是 $http 的ajax对象 必须引用vue-resource.js框架 做交互*/ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.post('post.php',{ a:1, b:20 },{ emulateJSON:true //post数据要模拟一个json数据 }).then(function(res){ alert(res.data); },function(res){ alert(res.status); }); } } }); }; </script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012143037759-1196946520.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ //jsonp发送数据 是给服务器发送 //vue数据交互的三种形式 post get jsonp 三种形式 /*vue 交互 使用 $http 就是 $http 的ajax对象 必须引用vue-resource.js框架 做交互*/ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.jsonp('https://sug.so.360.cn/suggest',{ word:'h' }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }); } } }); }; </script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012143157488-1614497505.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ //jsonp发送数据 是给服务器发送 //vue数据交互的三种形式 post get jsonp 三种形式 /*vue 交互 使用 $http 就是 $http 的ajax对象 必须引用vue-resource.js框架 做交互*/ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:'a' },{ jsonp:'cb' }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }); } } }); }; </script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012143250580-957086323.png)
15. 过滤器(vue自带过滤 还有自定一过滤)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> //、、、、、、、、、、、、、过滤器 ············ window.onload=function(){ new Vue({ el:'#box', data:{ } }); }; </script> </head> <body> <div id="box"> {{'welcome'|uppercase}} <!-- //uppercase 转换成大写哈哈哈--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012143615039-1484593116.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ //、、、、、、、、、、、、、过滤器 ············ new Vue({ el:'#box', data:{ } }); }; </script> </head> <body> <div id="box"> {{'welcome'|uppercase}}<!-- //uppercase 转换成大写哈哈哈--> <br> {{'WELCOME'|lowercase}} <!-- //lowercase 转换成小写哈哈哈--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012143731289-1200740134.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ //、、、、、、、、、、、、、过滤器 ············ new Vue({ el:'#box', data:{ } }); }; </script> </head> <body> <div id="box"> {{'WELCOME'|lowercase|capitalize}} <!--//lowercase 转换成小写哈哈哈 capitalize首字母大写--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012143828912-1996753342.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ //、、、、、、、、、、、、、过滤器 ············ new Vue({ el:'#box', data:{ } }); }; </script> </head> <body> <div id="box"> {{12|currency}} <!--// currency钱的过滤器--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012143925615-2126892693.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ //、、、、、、、、、、、、、过滤器 ············ new Vue({ el:'#box', data:{ } }); }; </script> </head> <body> <div id="box"> {{12|currency '¥'}} <!--中国钱的标志格式--> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012144017086-2114002333.png)
16. vue下拉列表(百度)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body','' data:{ myData:[], t1:'' }, methods:{ get:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:this.t1 },{ jsonp:'cb' }).then(function(res){ this.myData=res.data.s; },function(){ }); } } }); }; </script> </head> <body> <div id="box"> <input type="text" v-model="t1" @keyup="get()"> <ul> <li v-for="value in myData"> {{value}} </li> </ul> <p v-show="myData.length==0">暂无数据...</p> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012144930185-1006278268.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .gray{ background: #ccc; } </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ myData:[], t1:'', now:-1 }, methods:{ get:function(ev){ if(ev.keyCode==38 || ev.keyCode==40)return; this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:this.t1 },{ jsonp:'cb' }).then(function(res){ this.myData=res.data.s; },function(){ }); }, changeDown:function(){ this.now++; if(this.now==this.myData.length)this.now=-1; this.t1=this.myData[this.now]; }, changeUp:function(){ this.now--; if(this.now==-2)this.now=this.myData.length-1; this.t1=this.myData[this.now]; } } }); }; </script> </head> <body> <div id="box"> <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"> <ul> <li v-for="value in myData" :class="{gray:$index==now}"> {{value}} </li> </ul> <p v-show="myData.length==0">暂无数据...</p> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012145326352-888404361.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .gray{ background: #ccc; } </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ myData:[], t1:'', now:-1 }, methods:{ get:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:this.t1 },{ jsonp:'cb' }).then(function(res){ this.myData=res.data.s; },function(){ }); }, changeDown:function(){ this.now++; if(this.now==this.myData.length)this.now=-1; }, changeUp:function(){ this.now--; if(this.now==-2)this.now=this.myData.length-1; } } }); }; </script> </head> <body> <div id="box"> <input type="text" v-model="t1" @keyup="get()" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"> <ul> <li v-for="value in myData" :class="{gray:$index==now}"> {{value}} </li> </ul> <p v-show="myData.length==0">暂无数据...</p> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012145430241-591912789.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .gray{ background: #ccc; } </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ myData:[], t1:'', now:-1 }, methods:{ get:function(ev){ if(ev.keyCode==38 || ev.keyCode==40)return; if(ev.keyCode==13){ window.open('https://www.baidu.com/s?wd='+this.t1); this.t1=''; } this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:this.t1 },{ jsonp:'cb' }).then(function(res){ this.myData=res.data.s; },function(){ }); }, changeDown:function(){ this.now++; if(this.now==this.myData.length)this.now=-1; this.t1=this.myData[this.now]; }, changeUp:function(){ this.now--; if(this.now==-2)this.now=this.myData.length-1; this.t1=this.myData[this.now]; } } }); }; </script> </head> <body> <div id="box"> <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"> <ul> <li v-for="value in myData" :class="{gray:$index==now}"> {{value}} </li> </ul> <p v-show="myData.length==0">暂无数据...</p> </div> </body> </html>
![](https://img2018.cnblogs.com/blog/1760766/201910/1760766-20191012145535567-1147220109.png)