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里面的数据