码迷,mamicode.com
首页 > 其他好文 > 详细

vue的响应规则

时间:2018-12-29 13:36:53      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:his   ati   back   scale   没有响应   ons   doctype   obj   lan   

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(value, key) in msg">{{key}} - {{value}}</li>
    </ul>
  </div>
  <script src="../vue.js"></script>
  <script>
    /* 
      在Vue中的一些情况里
      对象新增属性是没有响应式
      我们需要使用Vue.set方法给对象添加新的属性才会有响应式效果

      Vue.set(对象, ‘新增属性名‘, ‘属性值‘)
      Vue.delete(对象, ‘要删除的属性名‘)

      this.$set(对象, ‘新增属性名‘, ‘属性值‘)
      this.$delete(对象, ‘要删除的属性名‘)

      ... 扩展运算符

      var arr = [1,2,3,4]
      var arr2 = [7,8,9]
      // arr2.push(arr)  [7,8,9,[1,2,3,4]]
      arr2.concat(arr) [7,8,9,1,2,3,4]

      const arr3 = [...arr2, ...arr]

      var obj = {a: 1}
      var obj2 = {b: 2}

      {a: 1, b: 2}

     */
    const app = new Vue({
      el: "#app",
      data: {
        msg: {
          a: 1, 
          b: 2,
          c: 3,
          d: 4
        }
      }
    })
  
  </script>
</body>
</html>

 

vue的响应规则

标签:his   ati   back   scale   没有响应   ons   doctype   obj   lan   

原文地址:https://www.cnblogs.com/bao2333/p/10195213.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!