鍍金池/ 問答/HTML/ vue顯示/隱藏元素的相關(guān)問題，數(shù)組已經(jīng)改變但是對應(yīng)的元素卻沒有隱藏?

vue顯示/隱藏元素的相關(guān)問題，數(shù)組已經(jīng)改變但是對應(yīng)的元素卻沒有隱藏?

問題：

點擊按鈕后發(fā)現(xiàn)console面板中arr的值已經(jīng)改變了，為什么對應(yīng)的列表沒有隱藏呢？

要實現(xiàn)的功能：

點擊按鈕，相應(yīng)的列表會隱藏
clipboard.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue測試</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="box">
        <button @click="show(0)">按鈕一</button>
        <button @click="show(1)">按鈕二</button>
        <button @click="show(2)">按鈕三</button>

        <ul>
            <li v-show="arr[0]">11</li>
            <li v-show="arr[1]">22</li>
            <li v-show="arr[2]">33</li>
        </ul>
    </div>

<script type="text/javascript">
    new Vue({
        el:"#box",
        data:{
            arr:[true,true,true]
        },
        methods:{
            show:function(num){
               this.arr[num]=false;
               console.log(this.arr);
            }
        }
    })
</script>

</body>
</html>
回答
編輯回答
孤毒

vue監(jiān)測不到arr[index]方式的改變
可用
this.$set(this.arr, num, !this.arr[num]) 或
this.arr.splice(num, 1, !this.arr[num])

2018年9月23日 08:11
編輯回答
久礙你

這是因為JavaScript瀏覽器的限制，其實主要是 Object.observe() 方法支持的不好，數(shù)組中index都可以看做是屬性，當(dāng)添加屬性并賦值時，Vue并不能檢測到對象中屬性的添加或者刪除，但是其的確是添加或刪除了，故我們可以通過console看到變化，但是就沒有辦法做到響應(yīng)式。
樓主有興趣去了解一下，這個和js的 Object.defineProperty方法有關(guān)：https://www.cnblogs.com/zhuzh...

2017年10月19日 09:53
編輯回答
初念

需要這樣寫

<template>
  <div id="box">
    <button @click="show(0)">按鈕一</button>
    <button @click="show(1)">按鈕二</button>
    <button @click="show(2)">按鈕三</button>
    <ul>
      <li v-show="arr[0]">11</li>
      <li v-show="arr[1]">22</li>
      <li v-show="arr[2]">33</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'vue_test1',
    data () {
      return {
        arr: [true, true, true]
      }
    },
    methods: {
      myTest () {
        alert('我是test里面的代碼')
      },
      show (num) {
        this.$set(this.arr, num, !this.arr[num])//這個地方要用$set
        console.log(this.arr)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

具體請看這個https://cn.vuejs.org/v2/api/#...

2017年7月23日 15:32
編輯回答
話寡
show:function(num){
   this.$set(this.arr, num, !this.arr[num])
}
2018年1月27日 17:30