vue v-for 注意事项

最新推荐文章于 2023-01-06 17:10:02 发布

昵称已被占用了了了了

最新推荐文章于 2023-01-06 17:10:02 发布

阅读量314

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/jingge_nihao/article/details/80086988

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<style type="text/css">

</style>
<body>
<div id="for">
<div v-for="(n,i) in numbers">
{{n}}
</div>
<button v-on:click="changeNum">click me!!!</button>

<div class="" v-for="p in persons">{{p.name}}</div>
<button v-on:click="add">click me ~！！！</button>
</div>
</body>

<script type="text/javascript">

new Vue({
el : "#for",
data : {
numbers : [1,2,3,4,5],
persons : [
{
id : 1,
name : "zhu"
},
{
id : 2,
name : "yu"
},
{
id : 3,
name : "jing"
}
]
},
methods : {
changeNum : function () {
Vue.set(this.numbers,1,10);//DOM重新渲染
//this.numbers[1]=100; DOM没有重新渲染
alert(this.numbers[1])
},
add : function () {
// DOM重新渲染 push 方法vue重新封装了并不是js中的push方法
this.persons.push({
id : 4,
name : "add one"
})
}
}
})
</script>

</html>

昵称已被占用了了了了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue v-for 注意事项

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"&
复制链接

扫一扫