Vue: v-on v-model

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,806评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,485评论 0 29
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 9,070评论 0 6
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 8,723评论 0 25
  • 《板桥晓别》 唐·李商隐 回望高城落晓河,长亭窗户压微波。 水仙欲上鲤鱼去,一夜芙蓉红泪多。
    喜亭阅读 1,805评论 0 3

友情链接更多精彩内容