vue常用指令

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1、v-if系列

v-if="数据|判断"

只要条件成立，就显示if中的元素

v-else （注意:必须跟在v-if或者v-if-else的后面，不然失效）

如果if条件不成立显示当前的元素

v-else-if 要紧跟v-if

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style>
.box{
width:100px;
height:100px;
background: red;
}
.box2{
width:100px;
height:100px;
background: yellow;
}
.box3{
width:100px;
height:100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<span>隔山打牛</span>
<div class="box" v-if="onOff == 'a'"></div>
<div class="box2" v-else-if="onOff == 'b'"></div>
<div class="box3" v-else></div>
</div>
<script>
new Vue({
el:'#app',
data:{
onOff:'b'
}
});
</script>
</body>
</html>

v-if中条件不成立就执行v-else-if中的yellow黄色背景，如果v-else-if也不成立，则执行v-else中的绿色背景

2、v-show

根据表达式之真假值，切换元素的 display CSS 属性

v-show和v-if都是用来控制元素的渲染

v-if——判断是否加载，可以减轻服务器的压力，在需要时加载

v-show——调整css dispaly属性，可以使客户端操作更加流畅

new Vue({
el:'#app',
data:{
islo:true
}
})

上面例子中如果islo为false则display属性为none 隐藏元素

3、v-for

该指令根据遍历数组来进行渲染

/*
一个参数：<div v-for="val in obj">{{val}}</div>
两个参数：<div v-for="(val,key)" in obj>{{val}}</div>
三个参数：<div v-for="(val,key,index)" in obj>{{val}}</div>
*/

注意：
当v-for 和 v-if同处于一个节点时候，v-for比v-if优先级高
意味着v-if将运行在每个v-for中

<!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">
<ul>
<li v-for="val in items">{{val}}</li>
</ul>
<ol>
<li v-for="(user,key) in itemObj">{{user.name}}</li>
</ol>
<div v-for="(val,key,index) in obj" >{{key}}：{{val}}</div>
</div>
<script>
/*
val:数组中的每个值，对象每个值
key:数据就下标，对象key值
index:下标0,1,2
*/
new Vue({
el:'#app',
data:{
items:['苹果','橘子','香蕉','草莓','柚子'],
itemObj:[
{name:'apple'},
{name:'orange'},
{name:'banana'},
{name:'strawberry'},
{name:'pomelo'},
],
obj:{
id:1,
name:'小明',
age:22,
home:'太原'
}
} });
</script>
</body>
</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>

v-on修饰符

stop

//调用 event.stopPropagation()

prevent

//调用 event.preventDefault()

self

//只当事件是从侦听器绑定的元素本身触发时才触发回调

new Vue({
el:'#app',
methods:{
b1(){alert(1);},
b2(){ alert(2);}
}
});

6、v-bind

v-bind:属性名

缩写:

:class

动态绑定数据，及时对页面的数据进行变更

一般是用来操作属性。如class、style、src、href等等

:class="c" 可以写数据

:class="{red:true}" red->类名: 布尔值，只有为true的时候才显示这个class

:class="[c1,c2]" c1和c2为对象 {red:true}

<!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>

在select上绑定v-model，如果option中有value,选择的结果优先为value值

如果没有value值，则走option的内容

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>