当绑定 v-on:click 事件时,想传入参数同时也传入当前元素:
<button v-on:click="say('hi',$event)">say hi</button> methods:{ say:function(message,e){ alert(message); console.log(e.currentTarget); } }
尝试一下 »
computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ,而 methods 内的方法则不会;例如以下实例初始化时会自动执行一遍 name1 和 greet 这两个方法:
var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 computed: { name1: function(){ alert('222') }, greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法
动态调节样式这个挺好用的:
<div id="app"> <button v-on:click="fontSize --">-</button> <button v-on:click="fontSize ++">+</button> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">小鸟启蒙</div> {{fontSize}} </div>
Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:
<button v-bind:disabled="someDynamicCondition">Button</button>
通过vue监听事件实现一个简单的购物车
<div id="app"> <table> <tr> <th>序号</th> <th>商品名称</th> <th>商品价格</th> <th>购买数量</th> <th>操作</th> </tr> <tr v-for="iphone in Ip_Json"> <td>{{ iphone.id }}</td> <td>{{ iphone.name }}</td> <td>{{ iphone.price }}</td> <td> <button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button> {{ iphone.count }} <button v-on:click="iphone.count+=1">+</button> </td> <td> <button v-on:click="iphone.count=0">移除</button> </td> </tr> </table> 总价:${{totalPrice()}} </div>
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
687Vue.js 事件处理器
当绑定 v-on:click 事件时,想传入参数同时也传入当前元素:
尝试一下 »
686Vue.js 事件处理器
computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ,而 methods 内的方法则不会;例如以下实例初始化时会自动执行一遍 name1 和 greet 这两个方法:
685Vue.js 样式绑定
动态调节样式这个挺好用的:
尝试一下 »
684Vue.js 样式绑定
Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令:
这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:
683Vue.js 监听属性
通过vue监听事件实现一个简单的购物车
尝试一下 »