![06deb0ff9c8ac16ff913c36abcba3a47.png](https://i-blog.csdnimg.cn/blog_migrate/183ec70ba229373e81c8cd9beab4e42c.jpeg)
1、v-text和v-html
v-XXX可以直接使用vue中的参数,text显示文本格式,html可以识别html标签
<div id="app">
<div>
<div v-text='bbb'></div>
<div v-html='bbb'></div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
bbb:"<h2>我是bbb</h2>"
}
})
</script>
显示结果:
![8a51f845776da1bb189b7ed75abe2c1c.png](https://i-blog.csdnimg.cn/blog_migrate/a8e488b724f9cac966c2ca1551dc216f.png)
2、v-show
在div中增加v-show标签,设置v-show=false,隐藏div
<div v-show='aaa' v-html='bbb'></div>
//vue中data增加aaa
data:{
bbb:"<h2>我是bbb</h2>",
aaa:false
}
显示结果:
![938da835f7cee880268034fe415c2cfe.png](https://i-blog.csdnimg.cn/blog_migrate/15df2b23001e71ae51128050a62abd5e.png)
看一下html元素,发现写了v-show=false的div,实际是设置了display=none的属性,不显示div
![1c397c9c76639fd11c60248eb12658f0.png](https://i-blog.csdnimg.cn/blog_migrate/3d656715b0ce8b74fa3ae7c4dce189be.jpeg)
3、v-if、v-else-if和v-else
标签根据返回布尔值为true时,显示相应div
<div id="app">
<div>
<div v-if='aaa==3'>{{ aaa }}=3</div>
<div v-else-if="aaa<3">{{ aaa }}<3</div>
<div v-else-if="aaa>3">{{ aaa }}>3</div></3>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
aaa:6
}
})
</script>
显示结果:布尔值为false的div,不在html标签中,说明未满足条件时不生成标签,并非改变dispaly隐藏
![7a2258185e1295bb0a7b831354d835b2.png](https://i-blog.csdnimg.cn/blog_migrate/c5271995c723c95f615a22934b6a7dd7.png)
4、v-for
vue中定义参数aaa数组,可以使用v-for标签,数组中每个对象定义为a,循环输出a,
<div id="app">
<div>
<div v-for='a in aaa'>这是{{ a }}<br/></div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
aaa:[1,2,3,4,5]
}
})
</script>
显示结果:
![99bbc6d14935e78c44ff7fee70909640.png](https://i-blog.csdnimg.cn/blog_migrate/3ef383edebe2a559e205006e08fa3566.png)
5、数据绑定单向与双向,v-bind 和v-model
v-bind单向绑定只能内存改变页面,可以简写为 :value :class等
v-model双向绑定是内存或页面改变都可以影响对方
看一个简单例子:
<div id="app">
<div>
单向绑定:<input type="text" v-bind:value='msg'/><br/>
双向绑定:<input type="text" v-model='msg'/><br/>
输入内容:{{ msg }}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
运行页面:
![db55a90fedff70018f9d3c102ed36ba0.png](https://i-blog.csdnimg.cn/blog_migrate/91604151afd4c88a01656119d72da284.jpeg)
测试:
在单向绑定中输入456,发现并未改变msg参数,因此也没有改变页面上绑定msg参数的控件显示
![4b8f47ef896227db11a1f43a5be90ccb.png](https://i-blog.csdnimg.cn/blog_migrate/735064ae3bd072e161d5e8ccf0dddc62.jpeg)
在双向绑定中输入789,由于改变了内存中msg参数的值,因此页面上绑定msg参数的数据也调整了
![f792b2b7c9842065655d9d84e3023977.png](https://i-blog.csdnimg.cn/blog_migrate/ecd9707cfe2df50ad0bc55cf42bd244e.jpeg)
6、事件绑定
使用v-on:click 可以简写为@click
增加一个button并绑定事件change,并在vue中添加方法change
<button @click='change'>把msg值改为“我变了”</button>
methods:{
change(){
this.msg='我变了'
}
}
运行页面:
![ad1eebb52fa5e47b289c03e3c45295b2.png](https://i-blog.csdnimg.cn/blog_migrate/ec8a208869a1d0dadeb96812c2d062b0.jpeg)
点击按钮
![0746d41d5e7511fac7dcda3988dcb936.png](https://i-blog.csdnimg.cn/blog_migrate/459556ed19b25b313086a5a8fb4a3d5b.jpeg)
下一讲说一下过滤器和监听。