争怎路由网/网站教程/内容

vue循环下文动态数据的处理方法(代码)

网站教程2024-06-01 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于vue循环列表动态数据的处理方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

调用方法:Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

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>

以上就是vue循环列表动态数据的处理方法(代码)的详细内容,更多请关注php中文网其它相关文章!

  • 微信

  • 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



    ……

    标签:vue循环下文动态数据的处理办法(代码)
    相关阅读