第二天作业

1.

遍历对象

  <div id="app">
    <p v-for="(val, key, i) in people">{{val}} {{key}} {{i}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        people: {
          'id': 301,
          '姓名': '张三',
           '性别': '男'
        }
      },
      methods: {}
    });

遍历数组

 <div id="app">
    <p v-for="count in 10">这是第 {{ count }} 个数</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
  

遍历对象数组

 <div id="app">
<div :class='stylearry'>helloword </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
      stylelearry:[
                    {
                      name: '张三',
                       age: 14
                  },
                  {                       size: '20',
                                          color: 'red'
                  }
               ]
      },
      methods: {
      }
    });
  </script>

2.

v-bind 绑定组件或特性到表达式，为单向绑定
v-model 在控件或组件上创建双向绑定

3.

v-show本质就是标签display设置为none，控制隐藏
v-if 是将元素删除

4.

有4种
单值设标签：

data: {color: 'red'}

对象设标签

data
{
   name： 'li'
   sex:   'men'
    age: '18'
}

数组设置:

data:
{
 keyArray: ['ture','false','null']
}

对象数组

data：
{
keyArray: [{li: 'ture'},{zi: 'false'},{ti: 'null'},]
}