• vue什么樣的數(shù)據(jù)不能在頁(yè)面顯示
  未計(jì)劃的數(shù)據(jù)，即在data中未定義的數(shù)據(jù)

<div id="app">
    <!--<p>{{a}}</p>-->
    <!--該數(shù)據(jù)未計(jì)劃定義，無(wú)法顯示-->
</div>

let message = "計(jì)劃數(shù)據(jù)";

    let vm = new Vue({
        el:"#app",
        //只有計(jì)劃好的數(shù)據(jù)才能做響應(yīng)
        data:{
            message:message,
            addMessage:{}
        }
    });

未定義的數(shù)據(jù).png

頁(yè)面無(wú)內(nèi)容顯示

• 如何添加未計(jì)劃的數(shù)據(jù)

//這種方法不能添加未計(jì)劃的數(shù)據(jù)
    // vm.addMessage.content="新加入的數(shù)據(jù)";//該數(shù)據(jù)無(wú)法加入

1.使用靜態(tài)方法Vue.set(target,prop,value)
Vue.set(vm.addMessage,"content","使用靜態(tài)方法set()加入的數(shù)據(jù)");
2.使用實(shí)例方法$set(target,prop,value)
vm.$set(vm.addMessage,"text","使用實(shí)例方法$set()加入的數(shù)據(jù)");

添加對(duì)象的屬性.png

  <div id="app">

    <p>原有：{{addMessage.a}}</p>
    <p>添加：{{addMessage.normal}}</p>

    <p>{{addMessage.text}}</p>
</div>

<script>
    let message = "計(jì)劃數(shù)據(jù)";

    let vm = new Vue({
        el:"#app",
        //只有計(jì)劃好的數(shù)據(jù)才能做響應(yīng)
        data:{
            message:message,
            addMessage:{
                a:123
            }
        }
    });
    //使用一般方法,更改屬性，但是不能保存原有的屬性
    vm.addMessage={normal:123}

原有的屬性丟失.png

 //Object.assign(vm.addMessage,{name:value})
    let o = Object.assign(vm.addMessage,{name:value});
    console.log(o===vm.addMessage);//true,vue的機(jī)制當(dāng)數(shù)值不發(fā)生改變時(shí)，默認(rèn)不刷新


    //改寫屬性的數(shù)值，重新賦值，重新得到一個(gè)和原來名稱相同的屬性
    //使用Object.assign({},mv.addMessage,{name:value})
    vm.addMessage = Object.assign({},vm.addMessage,{text:"使用assign添加數(shù)據(jù)"})

assign.png