Vue全局API-set全局操作

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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 记录平时学到的知识,标题写的大气一点,也算是给自己一点鼓励,希望在技术这条路可以远走越远,路越走越宽~ 文中...
    徐国军_plus阅读 5,586评论 3 28
  • 个人学习批处理的初衷来源于实际工作;在某个迭代版本有个BS(安卓手游模拟器)大需求,从而在测试过程中就重复涉及到...
    Luckykailiu阅读 10,263评论 0 11
  • Vue.set用于为对象或者数组赋值,弥补了Vue数组操作的不足。Vue.set( target, key, va...
    76e阅读 741评论 0 0
  • 一、Vue.directive自定义指令 可以定义一些属于自己的指令,比如我们要定义一个v-fang的指令,作用就...
    PYFang阅读 5,060评论 0 0
  • vue 的全局API:在构造器外部用vue提供给我们的API函数来定义新的功能 vue2.0_Vue.direct...
    紫由袅阅读 5,731评论 0 0