1.Vue中改变数组内容并在视图中展示的方法(三种):

①变异方法(7个):push,shift,unshift,pop,sort,splice,reverse

②set方法(例子如下)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中使用set方法改变视图中数组的内容</title>
</head>
<body>
    <script src="https://vuejs.org/js/vue.js"></script>
    <div id="app">
        <div v-for="item of list" @click="changContent" >{{item}}</div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                list:['点','我','第','二','个','字','变','你']
            },
            methods:{
                changContent(){
                //    Vue.set(vm.list,1,'你')
                   vm.$set(vm.list,1,'你')
                }
            }
        })
    </script>
</body>
</html>

③直接改变数组的引用:

比如要改变元素组中某一项内容,将数组全部使用,并改变其中一项即可。

2.Vue中改变对象中的内容并在视图中展示(两种方法)

①改变对象的引用

②使用set方法

注:改变Vue中对象的两种方法的使用同改变数组方法的使用一样。重点掌握set方法即可。

Logo

前往低代码交流专区

更多推荐