62 lines
1.7 KiB
HTML
62 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="../js/vue@2.7.16.js"></script>
|
|
<title>Vue监测数据的原理_数组</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<h1>列表过滤</h1>
|
|
<button @click="changeList">修改</button>
|
|
|
|
<ul>
|
|
<li v-for="(item,index) in list" :key="index">
|
|
{{item.name}}---{{item.age}}---{{item.sex}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
const vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
list: [
|
|
{ id: "001", name: "Bunny-001", age: 19, sex: "男" },
|
|
{ id: "002", name: "Bunny-002", age: 16, sex: "男" },
|
|
{ id: "003", name: "Bunny-003", age: 20, sex: "女" },
|
|
{ id: "004", name: "Bunny-004", age: 18, sex: "男" },
|
|
{ id: "005", name: "Bunny-005", age: 19, sex: "女" },
|
|
],
|
|
},
|
|
methods: {
|
|
changeList() {
|
|
// 无法修改数组，显示不出来修改
|
|
// this.list[0] = { id: "002", name: "Bunny-002", age: 16, sex: "男" };
|
|
|
|
// 可以这样修改
|
|
// 详细参考 https://v2.cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95
|
|
// this.list.splice(0, 1, {
|
|
// id: "0021",
|
|
// name: "Bunny-0021",
|
|
// age: 16,
|
|
// sex: "男",
|
|
// });
|
|
|
|
// 或者这样修改
|
|
// Vue.$set(this.list, 0, {
|
|
this.$set(this.list, 0, {
|
|
id: "0021",
|
|
name: "Bunny-0021",
|
|
age: 16,
|
|
sex: "男",
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
</html>
|