第三天听写

最新推荐文章于 2019-11-08 14:19:35 发布

tiantianfengtou

最新推荐文章于 2019-11-08 14:19:35 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/tiantianfengtou/article/details/102945933

版权

1.

<script src="./vue.js"></script>
<div id="app">
{{msg}}
<p v-text="msg"></p>
<p v-html="msg"></p>
<div>
<script>
  vue vm= new vue({
         el: "#app"
         data: {
          msg : hello world；     
}
})
</script>

2.

可以遍历对象和数组
遍历对象

  <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: {
          '寝室号': 301,
          '姓名': '赛娜',
           '床号': '4'
        }
      },
      methods: {}
    });
  </script>

遍历数组

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

3.

强变量类型和弱变量类型的差异是能否进行隐式的类型转换。

4.

设置给标签的class属性的方式有
data: {

    /*方式1、单个值设置给标签*/
    c1: 'cred',
    /*方式2、对象式设置*/
    cObj: {
        cred: true,
        w100: true,
        byellow: true
    },
    /*方式3、简单数组设置*/
    cSimpleArray: ['cred', 'w100', 'byellow'],
    /*方式4、对象数组设置*/
    cObjArray: [{cred: true}, {byellow: false}, 'w100'],
    democ: obj,
},

设置给标签的style属性的方式有

data: {
    // 方式1、将对象属性对应的样式值设置给标签
    styleObj: {
        'color': 'red',
        'font-size': '60px',
    },
    // 方式2、将数组中对象中css样式设置给标签
    styleObjArray: [
        {'color': 'red'},
        {'font-size': '60px'}
    ]
},