Vue.js Day2

卧槽。最近睡大觉了， 不多说了，继续。(:з」∠)

Vue修改css样式(你需要用v-bind(:)绑定class)

在:class中，如果有‘’引起来的变量名，Vue会从类名找，如没有，则从data中找。

<1>.直接传递一个数组，类名用引号括起来。

<h1 :class=['red','thin']>标题</h1>

<2>.传递一个对象

<h4 :class={thin:true,red:true}>标题4</h4>

<3>.数组嵌套对象

//flag = true
<h3 :class=['red',{'active':flag}]>标题3</h3>

<4>.传递数组的时候使用三元表达式控制

//个人觉得也可以return 一个class类名，不过后续没有尝试，以后偶机会再说吧.
<h2 :class=['red',flag?'active':'']>标题2</h2>

Vue v-model

由于v-bind只能实现单向的绑定,如果你想修改内容，同时改变示例中的数据，那害得看我v-model。 （它是双向绑定的一个指令）

<input type="text" v-model="msg">
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'大家'
        },
        methods:{

        }
    })

使用v-model，可以实现表单元素和数据的双向绑定。
注意：v-model只能用于表单元素(input,select,checkbox……)

v-if与v-show

v-if与v-show用于动态控制dom元素显示隐藏

<h3 v-if="flag">我是H3的if</h3>
<h4 v-show="flag">我是H4的show</h4>

不同点：
v-if每一次都会删除/创建元素,
v-show则不会进行这个操作，而是切换了元素的display属性(把display设置成了none）

从性能上来说,v-if有着较高的切换性能消耗，不建议在元素频繁切换的场景下使用.
但是如果元素有可能永远都不会展示给用户看，这种情况下用v-if比较好。
v-show则是有着较高的初始渲染消耗.

v-for与key

<1>.迭代一个数组 i为索引 (索引从0开始)

//list:[1,2,3,4,5,6,7,8]
<p v-for="(item,i) in list">{{i}}-----{{item}}</p>

<2>.迭代一个对象
在遍历对象的时候，除了有val，key，第三个参数才是索引（Key为唯一标识）

list3:{
                id:1,
                name:'李三',
                age:18,
                study:false
            }
    <p v-for="(val,key,i) in list3">{{val}}-----{{key}}----{{i}}</p>        

<3>.迭代数字
in后面放数字 ，默认是从1开始，这个数字代表着数组的长度，所以不能给-1啥的

<p v-for="count in 10">这是第{{count}}次循环</p>

<4>.迭代数组嵌套对象

list2:[
                {id:1,name:'上三'},
                {id:2,name:'下三'},
                {id:3,name:'中三'}
            ]
            <p v-for="user in list2">{{user.id}}------{{user.name}}</p>

总结:v-for 可以迭代普通的数组，数组嵌套的对象，对象，以及单纯的数字。

有个品牌案例……之后再写流程以及大概思路吧……睡大觉ヽ(￣▽￣)و