Vue： v-on v-model

作者: LVLIN_1598 | 来源:发表于2018-09-14 11:17 被阅读0次

1.v-on:绑定一个事件后面放事件名 v-on:click= " "
用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。
实例：点击逆转消息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
     new Vue({
            el: '#app-5',
            data: {
            message: 'Hello Vue.js!'
        },
            methods: {
            reverseMessage: function () {
            this.message =     this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

2，v-model：双向绑定

实例：

<body>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message"> </div>
<script src='./js/vue.js'></script>
<script>
    var app6 = new Vue({
        el: '#app-6'
        , data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>

运行结果：

360截图20180914111555955.jpg