<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="main">
<ul>
<li v-for="(data,index) in dataList">
{{index}} -> {{data}}
</li>
</ul>
<button @click="click1()">更换列表第一个元素为随机值,但是这个方法没吊用</button>
<button @click="click2()">变通方法1</button>
<button @click="click3()">变通方法2</button>
</div>
<script>
new Vue({
el: '#main',
data: {
dataList:['a','b','c','d'],
},
methods: {
click1() {
this.dataList[0] = Math.random();
},
click2() {
this.dataList.splice(0,1,Math.random());
},
click3() {
Vue.set(this.dataList,0,Math.random());
}
}
})
</script>
</body>
</html>
动态改变列表元素
最新推荐文章于 2021-12-01 21:33:27 发布