vue常用指令
Posted theblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue常用指令相关的知识，希望对你有一定的参考价值。
1、v-if系列
v-if="数据|判断"
只要条件成立，就显示if中的元素
v-else （注意:必须跟在v-if或者v-if-else的后面，不然失效）
如果if条件不成立显示当前的元素
v-else-if 要紧跟v-if
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../js/vue.min.js"></script> 7 <style> 8 .box{ 9 width:100px; 10 height:100px; 11 background: red; 12 } 13 .box2{ 14 width:100px; 15 height:100px; 16 background: yellow; 17 } 18 .box3{ 19 width:100px; 20 height:100px; 21 background: green; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="app"> 27 <span>隔山打牛</span> 28 <div class="box" v-if="onOff == ‘a‘"></div> 29 <div class="box2" v-else-if="onOff == ‘b‘"></div> 30 <div class="box3" v-else></div> 31 </div> 32 <script> 33 new Vue({ 34 el:‘#app‘, 35 data:{ 36 onOff:‘b‘ 37 } 38 }); 39 </script> 40 </body> 41 </html>
v-if中条件不成立就执行v-else-if中的yellow黄色背景，如果v-else-if也不成立，则执行v-else中的绿色背景
2、v-show
v-show和v-if都是用来控制元素的渲染
v-if——判断是否加载，可以减轻服务器的压力，在需要时加载
v-show——调整css dispaly属性，可以使客户端操作更加流畅
<div id="app"> <div v-show="islo">你好，vue</div> </div>
1 new Vue({ 2 el:‘#app‘, 3 data:{ 4 islo:true 5 } 6 })
上面例子中如果islo为false则display属性为none 隐藏元素
3、v-for
该指令根据遍历数组来进行渲染
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../js/vue.min.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li v-for="val in items">{{val}}</li> 12 </ul> 13 <ol> 14 <li v-for="(user,key) in itemObj">{{user.name}}</li> 15 </ol> 16 <div v-for="(val,key,index) in obj" >{{key}}：{{val}}</div> 17 </div> 18 <script> 19 /* 20 val:数组中的每个值，对象每个值 21 key:数据就下标，对象key值 22 index:下标0,1,2 23 */ 24 new Vue({ 25 el:‘#app‘, 26 data:{ 27 items:[‘苹果‘,‘橘子‘,‘香蕉‘,‘草莓‘,‘柚子‘], 28 itemObj:[ 29 {name:‘apple‘}, 30 {name:‘orange‘}, 31 {name:‘banana‘}, 32 {name:‘strawberry‘}, 33 {name:‘pomelo‘}, 34 ], 35 obj:{ 36 id:1, 37 name:‘小明‘, 38 age:22, 39 home:‘太原‘ 40 } 41 } 42 43 }); 44 </script> 45 </body> 46 </html>
4、v-text和v-html
v-text => 等同于innerText 文本
v-html => 等同于innerHTML 内容（包括元素）
{{msg}}这种当我们网速很慢或者js出错时，会暴露我们的{{xxx}},这时候可以使用v-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> </head> <body> <div id="app"> <span>{{msg}}</span> <p v-text="msg"></p> <p v-html="str"></p> </div> <script> new Vue({ el:‘#app‘, data:{ msg:‘你好，世界‘, str:‘<h2>内容</h2>‘//这里使用v-html，v-text会把<h2>标签也输出来 } }); </script> </body> </html>
5、v-on
v-on:事件名
缩写:@事件名
事件函数写在methods
methods在根实例下，值为一个对象
methods:{
函数名(){
this指向实例
this的数据修改，直接this.数据名即可
}
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> <style> </style> </head> <body> <div id="app"> <button @click="add">添加</button> <button @click="rm">删除</button> <ul> <li v-for="(val,key) in arr">{{val}}</li> </ul> </div> <script> new Vue({ el:‘#app‘, data:{ num:0, arr:[] }, methods:{ add(){ this.arr.unshift(++this.num) }, rm(){ if(this.num>0){ this.arr.shift(); this.num --; } } } }); </script> </body> </html>
6、v-bind
v-bind:属性名
缩写:
:class
一般是用来操作属性。
动态绑定数据，及时对页面的数据进行变更
:class="c" 可以写数据
:class="{red:true}" red->类名: 布尔值 ，只有为true的时候才显示这个class
:class="[c1,c2]" c1和c2为对象 {red:true}
常用的：class、style、src、href
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> <style> .classA{ color:red; } .classB{ color:orange; } </style> </head> <body> <div id="app"> <div :class="classA">绑定class</div> <div :class="{classA:isok}">绑定class的判断</div> <div :class="{classA,classB}">绑定class中数组</div> <div :class="isok?classA:classB">绑定class的三元运算符</div> <div> <input type="checkbox" id="isok" v-model="isok"> </div> </div> <script> new Vue({ el:‘#app‘, data:{ classA:‘classA‘, classB:‘classB‘, isok:true }, }); </script> </body> </html>
7、v-model
在表单上创建双向数据绑定
当在表单元素中，绑定了v-model，那么只要用户改变视图中的内容
那么就等同于直接改变数据，当然改变数据，一样会改变视图
在使用v-model的时候，如果放个数组，那么会自动查找表单元素中的value
没有则出现null,如果要统计多个表单元素的信息，可以把同一个数据绑定到 v-model上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> <style> .active{ background: red; } </style> </head> <body> <div id="app"> 小黄<input type="checkbox" value="小黄" v-model="arr"> 小蓝<input type="checkbox" value="小蓝" v-model="arr"> 小绿<input type="checkbox" value="小绿" v-model="arr"> {{arr}} </div> <script> new Vue({ el:‘#app‘, data:{ arr:[] }, }); </script> </body> </html>
8、v-once
v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能
<span v-once>change:{{msg}}</span><div v-once><h1>comment</h1> <p>{{msg}}</p> </div> <my-component v-once:comment="msg"></my-component><ul> <li v-for="i in list">{{i}}</li> </ul>
上面的例子中，msg,list即使产生改变，也不会重新渲染
9、v-pre
主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译
<div id="app"> <!--第一条语句不进行编译--> <span v-pre>{{message}}</span> <span>{{message}}</span> </div>
最终仅显示第二个span的内容
10、 v-cloak
这个指令是用来保持在元素上直到关联实例结束时进行编译
<div id="app" v-cloak> <div> {{message}} </div> </div> <script type="text/javascript"> new Vue({ el:‘#app‘, data:{ message:‘hello world‘ } }) </script>
在页面加载时会闪烁，先显示
<div> {{message}} </div>
然后再显示
<div> hello world! </div>
以上是关于vue常用指令的主要内容，如果未能解决你的问题，请参考以下文章