day02作业

1、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码。
数字 数组 对象

数字

<p v-for="i in 10">
{{i}}
</p>

数组

<p v-for="(str, index) in array">

对象

<p v-for="(value,key) in hero">
        <span>{{i}}</span>
        <span>{{key}}</span>
        <span>{{value}}</span>
    </p>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            array: ['盲僧', '亚索', '小鱼人', '瑞文'],
            hero: {
                'name': '盲僧',
                'sex': '男',
                'jineng': '神龙摆尾',
            }
        }
    });
</script>

2.文字叙述v-model和v-bind的差别
v-bind的绑定是一种单向绑定，既只能将m中的数据绑定到标签内属性上
既m改变标签内属性值也会改变，但标签内属性的变化无法体现到m中。
v-model是双向绑定，用于input这样的表单元素。
3、文字描述一下v-show和v-if的差别。
v-if是通过将其从源码中移除的方式来使标签消失。
v-show是通过设置display:none;的方式使标签隐藏。
4、将M中数据设置为标签的类有几种方式？就每种方式写出样例代码。

    <style>
        /*通过类的组合实现复合样式*/
        .cred {
            color: red;
        }

        .w100 {
            width: 100px;
        }

        .byellow {
            background-color: yellow;
        }
    </style>

1.单个值设置标签

data: {c1: 'cred'}

2.对象式设置

data:{
cObj: {
      cred: true,
      w100: true,
      byellow: true
      }
    }

3.简单数组设置

data:{
 cSimpleArray: ['cred', 'w100', 'byellow']
}

4.对象数组设置

data:{
cObjArray: [{cred: true}, {byellow: false}, 'w100']
}