正文
vue中的指令
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、声明式渲染有两种：
1.插值用两个花括号如：{{内容}}
例子：html
<div id="app1">
<p>{{message}}</p>
</div>
js:
var nv = new Vue({
el:'#app1',
data:{
message:'哈喽！',
}
})
2.绑定数据如：v-bind:标签属性=“插入的内容”
html:
<div id="app2">
<span :title="message2">
鼠标悬停在这里
</span>
</div>
js:
var app2 = new Vue({
el:'#app2',
data:{
message2:'页面加载于'+ new Date().toLocaleString()
}
})
二、条件与循环
1.v-if="一个变量"，在data中用tru和false来判断是否显示
html:
<div id="app3">
<span v-if="seen">看见我</span>
</div>
js:
var app3 = new Vue({
el:"#app3",
data:{
seen:true //用true和false来判断能否看见内容
}
})
2.
v-for:
指令可以绑定数组的数据来渲染一个项目列表如：
html:
<div id="app4">
<ul>
<li v-for="item in itemList">{{item}}</li>
</ul>
</div>
js:
var app4 = new Vue({
el:"#app4",
data:{
itemList:['第一项','第二项','第三项']
}
})
三、处理用户输入
1.
v-on
指令绑定一个事件监听器
html:
<div id="app5">
<span >{{message5}}</span>
<button v-on:click="news">点击扭转</button>
</div>
js:
var app5 = new Vue({
el:'#app5',
data:{
message5:'hello vue!'
},
methods:{
news:function(){
this.message5 = this.message5.split('').reverse().join('')
}
}
})
2.数据双向绑定
html
<div id="app6">
<span>{{message6}}</span>
<input type="text" v-model="message6">
</div>
js:
var app = new Vue({
el:"#app6",
data:{
message6:'数据双向绑定'
}
})
