SOURCE

/*内容介绍：
1.class name 的绑定
2.内联样式绑定
3.循环绑定  v-for="(item,i) in 对象"
        或 vfor="(item,i) in 10"

vcloak v-text v-html v-bin(:) v-on(@) v-model v-for v-if v-show

事件修饰： .stop .prevent .capture .self .once

el 指定要控制的区域， data 指定数据, methods 是个对像，自定义方法

在vm实例中，如查要访问data上的数据，或methods中的方法，必须带this

在 v-for 要会使用key属性，(只接受string/number)

v-model 只能用于表单元素

绑定样式的两种方式 v-bind:class  v-bind:style
*/



var vm = new Vue({
    el: "#app",
    data: {
        id: '',
        name: '',
        arr: [{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }],
        msg: "message",
        flag: true,
        spanStyle: { color: 'blue' },
        vshow: true
    },
    methods: {
        add() {     //添加数组对象
            this.arr.unshift({ id: this.id, name: this.name })
        },
        toggle() {   //显示隐藏元素
            this.vshow = !this.vshow;
        }
    }
})

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">

    <p :class="{active:flag}">class绑定和</p>
    <span :style="spanStyle">span标签,内联样式绑定</span><br>----------------<br>
    id<input type="text" v-model="id">name<input type="text" v-model="name"><input type="button" value="添加" @click="add()">
    <li v-for="(item,i) in arr" :key="item.id"><input type="checkbox">{{item.id}}+{{item.name}}+索引{{i}}</li>
    <li v-for="count in arr">{{count}}</li>
    <br>----------------if<br> 
    <input type="button" value="显示/隐藏元素" @click="toggle()">
    <h5 v-if="vshow">v-if(特点:每次会删除和添加,性能消耗高，元素不需要再显示了建议用)</h5>
    <h5 v-if="vshow">v-show(特点:不会删除，元素存在)</h5>
</div>

.active{
    color:red;
}
.bfont{
    font-size: 20px;
}