當前位置：
首頁 >
vue12 循环添加重复数据
發布時間：2025/3/21
21
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue12 循环添加重复数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>智能社——http://www.zhinengshe.com</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style></style><script src="vue.js"></script><script></script>
</head>
<body><div id="box"><input type="button" value="添加" @click="add"><ul><li v-for="val in arr">{{val}}</li></ul></div><script>var vm=new Vue({data:{arr:['apple','pear','orange']},methods:{add:function(){//只能添加一次，有重復數據，this.arr.push('tomato');}}}).$mount('#box');</script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>智能社——http://www.zhinengshe.com</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style></style><script src="vue.js"></script><script></script>
</head>
<body><div id="box"><input type="button" value="添加" @click="add"><ul><li v-for="val in arr" track-by="$index"> <!-- 可以添加重復數據-->{{val}}</li></ul></div><script>var vm=new Vue({data:{arr:['apple','pear','orange']},methods:{add:function(){this.arr.push('tomato');}}}).$mount('#box');</script>
</body>
</html>
?
總結
以上是生活随笔為你收集整理的vue12 循环添加重复数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 制作U盘启动盘将Ubuntu 12.04
- 下一篇： Spring容器装饰者模式应用之实现业务