条件与循环v-if&v-for
v-if:
<div id="app3">
<a v-if="seen">3、看得到我吗</a>
</div>
var app3 = new Vue({
el: "#app3",
data: {
seen: true
}
})
setTimeout('app3.seen="false"', 3000);
v-if属性绑定Vue实例data的数据。
当3秒后seen的值更改为false后,a元素就会消失
v-for:
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
v-for=”todo in todos”
该属性会遍历创建的Vue实例data的todos
v-on
<div id="app5">
<p>{{message}}</p>
<el-button type="primary" size="small" v-on:click="reverseMessage">逆转消息</el-button>/*这里需要引入element的js和css*/
</div>
var app5 = new Vue({
el: "#app5",
data: {
message: "5、v-on绑定method"
},
methods: {
reverseMessage: function () {
this.message = this.message.split('');
this.message = this.message.reverse();
this.message = this.message.join('');
}
}
})
v-on:click=”XXXX”
该属性会绑定Vue实例的methods里面XXXX方法。
v-model
v-model:它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app6">
<p>{{message}}</p>
<el-input style="margin:0px;padding:0px;" v-model="message" placeholder="请输入内容"></el-input>/*这里需要引入element的js和css*/
</div>
var app6 = new Vue({
el: "#app6",
data: {
message: "6、message内容"
}
});
input使用了v-model=”message”属性后
input的value的改变,会同时改变Vue实例data里面的数据