转载

vue中的指令

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:'数据双向绑定'
}
})
文章最后发布于: 2018-04-23 20:23:34
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览