vue.js学习笔记之v-bind,v-on

weixin_30547797

于 2016-02-25 15:08:00 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/MissBean/p/bindOn.html

本文介绍了Vue.js中v-bind和v-on指令的基本用法，包括如何使用它们来动态绑定属性和监听DOM事件。通过实例展示了如何改变链接地址和图片源，以及如何触发方法更新数据。

v-bind 指令用于响应地更新 HTML 特性形式如：v-bind:href 缩写为 :href;

v-on 指令用于监听DOM事件形式如：v-on:click 缩写为 @click;

 1 <body>
 2   <div id="test">
 3     <img v-bind:src="src">
 4     <a v-bind:href="url">百度一下</a>
 5     <a :href="url">百度一下</a>
 6     <a href="{{url}}">百度一下</a>
 7     <a v-on:click="update()" href="#">更改图片</a>
 8     <a @click="update()" href="#">更改图片</a>
 9   </div>
10   <script type="text/javascript">
11     new Vue({
12       el: '#test',
13       data: {
14         url: "https://www.baidu.com",
15         src: "img/spring.jpg"16 17 18       },
19       methods: {
20         update: function(){
21           this.src = "img/summer.jpg";
22         }
23       }
24     })
25   </script>
26 </body>