vue基础语法

条件与循环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里面的数据