美文网首页
Vue全局API-set全局操作

Vue全局API-set全局操作

作者: PZcoder | 来源:发表于2020-04-12 18:03 被阅读0次

set全局操作,修改数据

<body>
    <h1>vue.set全局操作<h1>
    <hr>
    <div id="app">
        {{count}}
        <ul>
            <li v-for="item in arr">
                {{item}}
            </li>
        </ul>
    </div>
    <!-- onclick绑定方法必须有括号 -->
    <p><button onclick="add()">add</button></p>

    <script type="text/javascript">
        function add(){
            //3种方法都可以更新内容
            //Vue.set(outData,'count',2);//1.每次点击按钮后,内容变成2
            //app.count++;//2.每次内容+1
            //outData.count++;//3.每次内容+1

            //改变数组内容 没有count改变时数组改变不能生效。。
            //app.arr[1]='ddd';//数组下标方式改变内容,Vue监测不到,必须用set方式改变
            Vue.set(app.arr,1,'ddd');//
            Vue.set(app.arr,3,'232');//增加数组元素
        }

        //构造器外边赋值给构造器
        var outData = {
            count:1,
            // goods:'car',
            arr:['aaa','bbb','ccc'],
        }

        var app = new Vue({//构造器
            el:'#app',
            data:outData,
        })
    </script>
</body>

相关文章

网友评论

      本文标题:Vue全局API-set全局操作

      本文链接:https://www.haomeiwen.com/subject/ahebmhtx.html