Vue.js 教程,Vue 在线

687Vue.js 事件处理器

当绑定 v-on:click 事件时,想传入参数同时也传入当前元素:

<button v-on:click="say('hi',$event)">say hi</button>

methods:{
  say:function(message,e){
     alert(message);
     console.log(e.currentTarget);
  }
}

尝试一下 »

686Vue.js 事件处理器

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 直接调用方法

685Vue.js 样式绑定

动态调节样式这个挺好用的:

<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>

尝试一下 »

684Vue.js 样式绑定

Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令:

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:

<button v-bind:disabled="someDynamicCondition">Button</button>
  • 1:v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值="表达式"
  • 2:v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id
  • 3:v-model用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。

683Vue.js 监听属性

通过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>

尝试一下 »