vue.js之v-on与v-bind
2017-11-07 16:24
423 查看
v-on 指令
<div id="app"> <button v-on:click="say">点击</button> <!--简写:<button @click="say">点击</button>--> </div> <script> let vm = new Vue({ el: "#app", data: { name: 'Hellow Vue.js' }, methods: { // `event` 是原生 DOM 事件 say: function(event) { // 方法内 `this` 指向 vm console.log(this.name + '!'); // 当前标签名 console.log(event.target.tagName); // 当前元素 console.log(event.currentTarget); } } }); </script>
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为,没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符,键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button>
v-bind 指令
动态地绑定一个或多个特性,或一个组件 prop 到表达式。<div id="app"> <a v-bind:href="link">百度</a><br> <a :href="link">简写</a> </div> <script> let vm = new Vue({ el: "#app", data: { link: 'https://www.baidu.com/' } }); </script>
class对象语法
<!--方法一--> <div id="app"> <div class="static" v-bind:class="{ 'age-statis': age_statis, 'edu-statis': edu_statis }"> </div> </div> <script> let vm = new Vue({ el: "#app", data: { age_statis:true, edu_statis:false } }); </script>
<!--方法二--> <div id="app"> <div class="static" v-bind:class="classObj"></div> </div> <script> let vm = new Vue({ el: "#app", data: { classObj:{ 'age-statis':true, 'edu-statis':false } } }); </script>
以上两种方法结果都一样,如下图:
如果 edu_statis 的值为 true,class 列表将变为 “static age_statis edu_statis”。
class数组语法
<div id="app"> <div class="static" v-bind:class="[age,edu]"></div> </div> <script> let vm = new Vue({ el: "#app", data: { age: 'age-statis', edu: 'edu-statis' } }); </script>
相关文章推荐
- vue.js学习笔记之v-bind,v-on
- Vue.js常用指令汇总(v-if//v-show//v-else//v-for//v-bind//v-on等)
- vue.js学习笔记之v-bind和v-on解析
- Vue.js 属性绑定 v-bind
- js 事件绑定的方法bind(),on(),off()
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
- Vue.js学习笔记:属性绑定 v-bind
- js事件绑定的几种方式与on()、bind()的区别
- Vue中的缩写:v-bind、v-on
- Vue.js v-bind遇到的数据渲染问题
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- vue.js指令与事件(v-bind)
- 对Vue.js之事件的绑定(v-on: 或者 @ )详解
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- Vue.js学习笔记:v-bind属性绑定(class,src)
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
- npm is known not to run on Node.js vue启动报错
- Vue2.0-4 -指令v-bind 与 v-on 缩写
- Vue v-if v-for v-bind v-on
- vue.js绑定事件监听器(v-on)