v-text
v-text
指令的作用是:设置标签的内容(textContent
){{}}
可以替换指定内容设置标签的文本值(textContent
)
语法:
<div id="app">
<h2 v-text="message+'!'"></h2>
<h2>广州{{ message+"!" }}</h2>
</div>
var app = new Vue({
el:"#app",
data:{
message:"体育馆"
}
})
v-html
设置标签的innerHTML
v-html
指令的作用是:设置元素的innerHTML
HTML
结构会被解析为标签v-text
指令无论内容是什么,只会解析为文本v-text
,需要解析html
结构使用v-html
<div id="app">
<p v-html="content"></p>
</div>
var app = new Vue({
el:"#app",
data:{
content:"<a href='#'>Bing</a>"
}
})
v-on
为元素绑定事件
v-on
指令的作用是:为元素绑定事件on
@
methods
属性中this
关键字可以访问定义在data中数据<div id="app">
<input type="button" value="事件绑定" v-on:click="dolt">
<input type="button" value="事件绑定" v-on:monseenter="dolt">
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<input type="button" value="事件绑定" @dblclick="dolt">
</div>
var app = new Vue({
el:'#app',
methods:{
dolt:function(){
//逻辑
}
}
})
补充:
传递自定义参数,事件修饰符
<div id="app">
<input type="button" @click="doIt(p1,p2)"/>
<input type="text" @click.enter="sayHi"/>
</div>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){},
sayHi:function(){}
}
})
.修饰符
可以对事件进行限制.enter
可以限制触发的按键为回车v-show
v-show
指令的作用是:根据真假切换元素的显示状态display
,实现显示隐藏true
元素显示,值为false
元素隐藏<div id="app">
<img src="地址" v-show="true">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18">
</div>
var app = new Vue({
el:"#app",
isShow:false,
age:16
})
v-if
根据表达值的真假,切换元素的显示和隐藏(操纵dom
元素)
v-if
指令的作用是:根据表达式的真假切换元素的显示状态dom
元素来切换显示状态true
,元素存在于dom
树中,为false
,从dom
树中移除v-show
,反之使用v-if
,前者的切换消耗小<div id="app">
<p v-if="true">我是一个P标签</p>
<p v-if="isShow">我是一个P标签</p>
<p v-if="表达式">我是一个P标签</p>
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false
}
})
v-bind
设置元素的属性(比如:src
,title
,class
)
v-bind
指令的作用是:为元素绑定属性v-bind:属性名
v-bind
,只保留:属性名class
建议使用对象的方式<div id="app">
<img v-bind:src="imageSrc">
<img v-bind:title="imageTitle+'!!!'">
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
</div>
简写:
<div id="app">
<img :src="imgSrc">
<img :title="imgtitle+'!!!'">
<img :class="isActive?'active':''">
<img :class="{active:isActive}">
</div>
var app = new Vue({
el:"#app",
imgSrc:"图片地址",
imageTitle:"Programmer",
isActive:false
})
v-for
根据数据生成列表结构
v-for
指令的作用是:根据数据生成列表结构v-for
结合使用(item,index) in 数据
item
和index
可以结合其他指令一起使用<div id="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{ index }}{{ item }}
</li>
<li v-for="(item,index) in objArr">
{{ item.name }}
</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"jack"},
{name:"rose"}
]
}
})
v-model
获取和设置表单元素的值(双向数据绑定)
v-model
指令的作用是便捷的设置和获取表单元素的值<div id="app">
<input type="text" v-model="message"/>
</div>
var app = new Vue({
el:"#app",
data:{
message:"programmer"
}
})
联系客服