Vue Vue.set 全局操作

37 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.set 全局操作</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
     {{count}}
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
</div>
<p><button οnclick="add()">Add</button></p>
</body>
</html>
<script>
    var outData={
        count:1,
         goods:'car',
        arr:[1,2,3,4]
    }
    var app = new Vue({
        el:'#app',
        data:outData,
    })
    function add(){
       // Vue.set(outData,'count',2)
       // app.count++;
      //  outData.count++;
        //用下标的时候改变值的时候就不会渲染
      // app.arr[0]=4;
        //Vue提供了set 来进行渲染
        Vue.set(app.arr,1,'json')
    }
</script>