有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue 检测不到数组或对象的变化怎么办?

vue cat 8个月前 (02-17) 57次浏览 已收录 0个评论 扫描二维码

html:

<div id="box">
    <ul>
      <li v-for="item in arr" :key="item">{{item}}</li>
      <button @click="add">添加</button>
      <p>
        {{obj.name}}
      </p>
      <p>
        {{obj.sex}}
      </p>
      <button @click="addObj">添加</button>
    </ul>
  </div>

js:

new Vue({
      data: {
        arr: ['张飞', '关羽', '刘备'],
        obj: {
          name: '如花'
        }
      },
      methods: {
        add() {
          // 只要是数组的方法改变了数组,都可以引起页面的重新渲染

          // 错误 页面不会重新渲染
          // this.arr[3]='诸葛亮'
          // console.log(this.arr)

          // this.$set(操作的数组,下标,'要添加的项')
          // Vue.set(操作的数组,下标,'要添加的项')
          // this.$set(this.arr,3,'诸葛亮')
          // Vue.set(this.arr,3,'诸葛亮')
        },

        addObj() {
          // 错误的:页面不会重新渲染
          // this.obj.sex='男'
          // console.log(this.obj)

          // this.$set(操作的对象,键,键值)
          // Vue.set(操作的对象,键,键值)
          // this.$set(this.obj,'sex','男')
          Vue.set(this.obj, 'sex', '男')
          console.log(this.obj);
        }
      }
    }).$mount('#box')
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址