在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue.set修改的對(duì)象屬性值無(wú)法在插值處更新嗎？

Vue.set修改的對(duì)象屬性值無(wú)法在插值處更新嗎？

<!--
* @Author: chj
* @FileName:vue.set.html
* @Date:   2018-06-22 13:58:18
* @Last Modified by:   chj
* @Last Modified time: 2018-06-22 16:10:47
-->
<!DOCTYPE html>
<html lang="cmn-hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../assets/js/vue.js" type="text/javascript"></script>
    <title>vue.set</title>
</head>
<body>
    <h1>vue.set</h1>
    <hr>
    <div id="app">
        <ol>
            <li>姓名:{{outData.Name}}</li>
            <li>年齡:{{outData.Age}}</li>
            <li>學(xué)校:{{outData.School}}</li>
            <li v-show="isShow">班號(hào):{{outData.class}}</li>
            <li v-if="isTrue">學(xué)號(hào):{{outData.No}}</li>
        </ol>
        <button @click="plus" id="btn1">增加一個(gè)學(xué)號(hào)信息</button>
        <button onclick="changeClass()" id="btn2">修改班號(hào)</button>
        <ol>
            <ul>
                <li v-for=" value in arr">{{value}}</li>
            </ul>
        </ol>
        <button onclick="add()">修改數(shù)組</button>
    </div>
    <script type="text/javascript">
    //外部數(shù)據(jù)
    var outData = {
        Name: '小明',
        Age: 18,
        School: '光明小學(xué)'
    }

     //修改班級(jí)號(hào)
    function changeClass() {
        Vue.set(outData, "class", "10");
        console.log("outData.class:"+outData.class);
    }

    function add() {
        //app.arr[1] = 'ddd';
        Vue.set(app.arr,1,'ddd');
        console.log(app.arr[1]);
    }
    var app = new Vue({
        el: "#app",
        data: {
            outData: outData,
            isTrue: false,
            isShow: false,
            class: "5",
            arr: ['aaa', 'bbb', 'ccc']
        },
        methods: {
            plus: function() {
                this.isTrue = true;
                this.isShow = true;
                outData["No"] = "123";
                outData["class"] = this.class;
                console.log('outData.class:'+outData.class);
            },
        }
    })
    </script>
</body>

</html>

分別點(diǎn)擊btn1和btn2的時(shí)候，值分別是5和10.
圖片描述

但是頁(yè)面中數(shù)值依然是5沒有變化，這個(gè)是為什么呢

回答
編輯回答
離殤

this.outData.class = this.class

2017年4月19日 01:55
編輯回答
薔薇花

Vue.set(app.outData, "class", "10")

2017年5月16日 23:34