vue_动态渲染_添加obj属性_$set方法 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .activated {color: red}
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="handleObjForeachload">对象遍历动态加载数据</button>
    <p>对象遍历</p>
    <template v-for="(value, key, index) of listObj" >
      <p>对象{{value}} --- {{key}} --- {{index}}</p>
      <p>数组{{arr[index]}}---- {{index}}</p>
    </template>
  </div>
</body>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    data: {
      listObj: {
        "goodsId": "0001",
        "goodsPrice": "￥5899.00",
        "goodsInfo": "直降500元！到手价5899元！享12期免息！低至16.2元/天",
        "goodsShop": "华为京东自营官方旗...",
        "goodsImg": "http://..............."
      },
      arr: ['nice', 'to', 'meet', 'you', 'too']
    },
    methods: {
      handleObjForeachload () {
        // set方法给对象动态添加属性
        this.$set(this.listObj, 'goodsAdress', 'beijing')
        //给对象同时添加多条属性
        this.listObj = Object.assign({}, this.listObj, {
          phone: '188888888',
          mail: '1111@qq.com'
        });
        // set方法给数组动态添加值//没有单独循环数组，添加同样多的数据
        this.$set(this.arr, this.arr.length, '!!!!!')
        this.$set(this.arr, this.arr.length, 'hello')
        this.$set(this.arr, this.arr.length, 'jack')

        console.log(this.listObj)
        console.log(this.arr)
      }
    }
  })
  
</script>
</html>

 

posted @ 2020-03-05 13:55  前端之旅  阅读(3052)  评论(0)    收藏  举报