8个常用的Vue指令
v-text
设置标签的文本值
<div id="app">
<h2 v-text="message"></h2>
<!-- v-text指令会替换标签中所有内容 -->
<h2 v-text="message">学习</h2>
<h2 v-text="message+'!!!'"></h2>
<h2>{{message}}学习</h2>
<h2>{{message+"!!!"}}</h2>
</div>
var vue = new Vue({
el:"#app",
data:{
message:"Vue"
}
})
v-html
设置标签的innerHTML
<div id="app">
<p v-html="content"></p>
</div>
var vue = new Vue({
el:"#app",
data:{
content:"<a href='#'>内容</a>"
}
})
v-show
根据表达式的真假,切换元素的显示与隐藏
<div id="app">
<h2 v-show="isShow">隐藏</h2>
<!-- 可以使用表达式 -->
<h2 v-show="!isShow">显示</h2>
<h2 v-show="age>=18">age>=18显示</h2>
</div>
var vue = new Vue({
el:"#app",
data:{
isShow:false,
age:18
}
})
v-if
根据表达式的真假,切换元素的显示与隐藏
<div id="app">
<h2 v-if="isShow">隐藏</h2>
<h2 v-if="true">显示</h2>
<h2 v-if="!isShow">表达式显示</h2>
</div>
var vue = new Vue({
el:"#app",
data:{
isShow:false
}
})
v-if本质是通过操作dom元素来切换显示隐藏状态
v-show本质是基于CSS的display属性来切换显示隐藏状态
频繁的切换用v-show,反之使用v-if,因为前者的切换消耗小
v-bind
设置元素的属性(比如:src,title,class)
用法是v-bind:属性名
,如v-bind:src=" "
,也可以简写,省略v-bind,写成:src=" "
<div id="app">
<img v-bind:src="imgSrc" >
<h2 v-bind:title="tt">标题</h2>
<!-- 也可以使用表达式 -->
<h2 v-bind:title="tt+'!!!'">标题</h2>
<img v-bind:border="bd" src="../imgs/computer.png">
<img v-bind:border="bd==2?5:0" src="../imgs/computer.png">
<!-- v-bind可以省略 -->
<img :border="bd" :src="imgSrc">
</div>
var vue = new Vue({
el:"#app",
data:{
imgSrc:"../imgs/computer.png",
tt:"这是一个标题",
bd:2
}
})
v-for
根据数据生成列表结构
数组经常和v-for使用,语法是(item,index) in 数据名
,item和index可以结合其他指令一起使用;数组长度的更新会同步到页面上,是响应式的。
<div id="app">
<ul>
<li v-for="n in arr">{{n}}</li>
<li v-for="obj in objArr">{{obj.name}}</li>
<!-- index从0开始 -->
<li v-for="(obj,index) in objArr">{{index}}--{{obj.name}}</li>
</ul>
</div>
var vue = new Vue({
el:"#app",
data:{
arr:[1,2,3],
objArr:[
{name:"jack"},
{name:"rose"}
]
}
})
v-on
为元素绑定事件
<div id="app">
<input type="button" value="单击事件绑定" v-on:click="event"/>
<input type="button" value="鼠标指向事件绑定" v-on:mouseenter="event"/>
<input type="button" value="双击事件绑定" v-on:dblclick="event"/>
<!-- v-on:可以简写为@ -->
<input type="button" value="双击事件绑定" @dblclick="event"/><br>
<!-- 事件的后面跟上 .修饰符 可以对事件进行限制 -->
<!-- .enter可以限制触发的按键为回车 -->
<input type="text" @keyup.enter="event">
</div>
var vue = new Vue({
el:"#app",
methods:{
event:function(){
alert("事件");
}
}
})
v-model
获取和设置表单元素的值(双向数据绑定)
<div id="app">
<input type="text" v-model="message">
<!-- 双向数据绑定意思就改动其中一个另一个也会被改变 -->
<h2>{{message}}</h2>
</div>
var vue = new Vue({
el:"#app",
data:{
message:"双向数据绑定"
}
})