search

Home >Web Front-end >JS Tutorial >How to process dynamic data in vue loop list (code)

How to process dynamic data in vue loop list (code)

不言
不言Original
2018-09-20 16:47:023290browse

The content of this article is about the processing method (code) of dynamic data in vue loop list. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Calling method: Vue.set(target, key, value)

target: the data source to be changed (can be an object or array)

key: Specific data to be changed

value: reassigned value

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <p v-for="(item,index)in list" :key="item.id" @click="btnClick(index,item.id)">
        {{item.message}}
    </p>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
    var vm2=new Vue({
        el:"#app",
        data:{
            list:[
                {message:"星星",id:"1"},
                {message:"太阳",id:"2"},
                {message:"月亮",id:"3"}
            ]
        },
        methods:{
            btnClick(index,id){
                this.$set(this.list,index,{message:"小猫",id:id});
            }
        }
    });
</script>
</body>
</html>

The above is the detailed content of How to process dynamic data in vue loop list (code). For more information, please follow other related articles on the PHP Chinese website!

循环 对象
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Performance test comparison of js array deduplication methodsNext article：Performance test comparison of js array deduplication methods

Related articles

See more