Javascript 清空Vue.js数组

我最近开始使用Vue.js，但遇到了一个小问题。我有一个数组，并使用Vue.js将该数组添加到渲染代码中。使用标准的

.push

就可以了

但是，我还希望能够清除数组，从而清除渲染代码。但是当我尝试

array=[]

清除它时，代码不起作用，所有东西都停止工作

如何在不中断程序的情况下清除列表

我在下面的代码片段中复制了这个问题

let results=[1,2]；
设num=3；
var app=新的Vue({
el:“#应用程序”，
数据：{
结果：结果
}
});
document.getElementById（“add”）.addEventListener（“单击”，函数）（）{
结果：推送（num）；
num++；
});
document.getElementById（“清除”）.addEventListener（“单击”，函数（）{
结果=[]；
num=1；
});
。作为控制台包装器{
高度：0px；
}

添加
清楚的
{{result}}
因此，我在你的应用程序中更新了一些小东西，它们是通过vue方式完成的，而不是老式的vanilla JS方式


首先，我们管理
数据
部分中的所有组件数据，因此您不需要上述JS变量
这也是一种很好的方法，可以在这里返回返回json的函数，而不仅仅是原始json对象
接下来，您不再需要使用那种老式的
文档.getElementById（“add”）.addEventListener
方法，只需返回
方法中的函数，然后使用
v-on:click=“addNew”
属性调用它们即可



newvue({
el:“应用程序”，
数据：（）=>{
返回{
结果：[3,1,4,1,5]
};
},
方法：{
addNew（）{
const nextNum=this.$data.results.length+1；
这是$data.results.push（nextNum）；
},
clearAll（）{
这是。$data.results=[]；
}
}
})
。作为控制台包装器{
高度：0px；
}

很棒的计数应用程序
添加
清楚的



{{result}}


因此，我在你的应用程序中更新了一些小东西，它们是通过vue方式完成的，而不是老式的vanilla JS方式


首先，我们管理
数据
部分中的所有组件数据，因此您不需要上述JS变量
这也是一种很好的方法，可以在这里返回返回json的函数，而不仅仅是原始json对象
接下来，您不再需要使用那种老式的
文档.getElementById（“add”）.addEventListener
方法，只需返回
方法中的函数，然后使用
v-on:click=“addNew”
属性调用它们即可



newvue({
el:“应用程序”，
数据：（）=>{
返回{
结果：[3,1,4,1,5]
};
},
方法：{
addNew（）{
const nextNum=this.$data.results.length+1；
这是$data.results.push（nextNum）；
},
clearAll（）{
这是。$data.results=[]；
}
}
})
。作为控制台包装器{
高度：0px；
}

很棒的计数应用程序
添加
清楚的



{{result}}


解决方案1:

移动#应用程序中的按钮并使用Vue的处理程序


let results=[1,2]；
设num=3；
var app=新的Vue({
el:“#应用程序”，
数据：{
结果：结果
},
方法：{
添加：函数（）{
这个.results.push（num）；
num++；
},
清除：函数（）{
这个结果=[]；
num=1；
}
}
});
。作为控制台包装器{
高度：0px；
}

添加
清楚的
{{result}}
解决方案1:

移动#应用程序中的按钮并使用Vue的处理程序


let results=[1,2]；
设num=3；
var app=新的Vue({
el:“#应用程序”，
数据：{
结果：结果
},
方法：{
添加：函数（）{
这个.results.push（num）；
num++；
},
清除：函数（）{
这个结果=[]；
num=1；
}
}
});
。作为控制台包装器{
高度：0px；
}

添加
清楚的
{{result}}
让它更具视觉效果

<button @click="add">Add</button>
<button @click="clear">Clear</button>

var app = new Vue({
      el: '#app',
      data: {
        results: [1, 2],
        num : 3
      }, 
      methods(){
          add(){
            this.results.push(num);
            this.num++;
          },
          clear(){
           this.results = [];
           this.num = 1;
          }
      }

    });

添加
清楚的
var app=新的Vue({
el:“#应用程序”，
数据：{
结果：[1,2]，
总数：3
}, 
方法（）{
添加（）{
这个.results.push（num）；
这个.num++；
},
清除（）{
这个结果=[]；
this.num=1；
}
}
});
让它更具视觉效果

<button @click="add">Add</button>
<button @click="clear">Clear</button>

var app = new Vue({
      el: '#app',
      data: {
        results: [1, 2],
        num : 3
      }, 
      methods(){
          add(){
            this.results.push(num);
            this.num++;
          },
          clear(){
           this.results = [];
           this.num = 1;
          }
      }

    });

添加
清楚的
var app=新的Vue({
el:“#应用程序”，
数据：{
结果：[1,2]，
总数：3
}, 
方法（）{
添加（）{
这个.results.push（num）；
这个.num++；
},
清除（）{
这个结果=[]；
this.num=1；
}
}
});
如果使用VUEJ，则不需要在Vue实例外声明任何变量，也不需要在Vue实例外声明任何普通代码

您可以在vue实例中使用vanilla，但目前不需要：

document.getElementById("add").addEventListener("click", function() {
  results.push(num);
  num++;
});

document.getElementById("clear").addEventListener("click", function() {
  results = [];
  num = 1;
});

相反，您可以这样使用：

new Vue({
el: '#app',
data: {
    results: [],
    num: 1
},
methods: {
    addNumberArray(){
    this.results.push(number);
    number++;
  },
  clearNumberArray(){
    this.results = [];
    number = 1;
  }
}
});

这里有一个活生生的例子：
如果使用VUEJ，则不需要在Vue实例外声明任何变量，也不需要在Vue实例外声明任何普通代码

您可以在vue实例中使用vanilla，但目前不需要：

document.getElementById("add").addEventListener("click", function() {
  results.push(num);
  num++;
});

document.getElementById("clear").addEventListener("click", function() {
  results = [];
  num = 1;
});

相反，您可以这样使用：

new Vue({
el: '#app',
data: {
    results: [],
    num: 1
},
methods: {
    addNumberArray(){
    this.results.push(number);
    number++;
  },
  clearNumberArray(){
    this.results = [];
    number = 1;
  }
}
});

这里有一个活生生的例子：
请您也解释一下好吗当然，现在就写；）请你也解释一下好吗当然，现在就写；）你的第二个解决方案正是我想要的。非常感谢！你的第二个解决方案正是我想要的。非常感谢！