Vue.set 全局操作 结构器外面修改数据 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.set全局操作</title>
    <script type="text/javascript" src="js/vue.js"></script>

</head>
<body>
    <h1>vue.set</h1>
    <div id="app">
        <p>{{count}}</p>

        <!-- <p><button @click="add">add</button></p>  第一种：通过调用方法里的函数 -->
        <ul>
            <li v-for="item in array">{{item}}</li>
        </ul>
        <p><button onclick="jia()">jia</button></p>
    </div>
</body>
<script type="text/javascript">
        function jia(){

        //p标签里的值改变操作  3种方法 
            //Vue.set(outData,'count',5);//括号  第一个参数是对象，第二个是 改变的具体对象  第三个是  改变后的值
            //app.count++;
            //outData.count++;

        //下面是  ul  li 值改变操作
            app.$data.array[1]='ddd';  //改变第二个li里的值  第一种方法
            //app.array[1]='ddd';   //改变  第二个li里的值  第二种方法
            //Vue.set(app.array,1,'ddddddd')   // 括号里 第一个是 改变的数组，第二个是 数组具体对象，第三个是改变的具体址   以上两个方法 通过下标改变数组值  vue是监测不到的，有限制 所以使用  Vue.set 方法

        }
        var outData={    //    在构造器外面声明数据
            count:1,
            goods:'car',
            array:['aaa','bbb','ccc']
        }
        var app=new Vue({
            el:"#app",
            data:outData,   //  把在构造器外面声明的数据赋值给构造器
            methods:{
                add:function(){
                    this.count++
                }
            }
        })
    </script>
</html>

 

posted @ 2018-02-27 17:09  Jinsuo  阅读(328)  评论(0)    收藏  举报