第一種:文字插值 如:

{{msg}} 第二種:單詞插值 如果想要讓HTML標籤插入的值只插入一次,那麼就給這個標籤加v-once 如: {{msg}} 第三種：html標籤插值(如果加上v-html就會在裡面新增標籤內容或者直接新增內容) 第四種:標籤插值 在HTML標籤中插入資料要使用v-bind 可以縮寫成： {{msg}} 第五種:插值表示式 {{title}} 第六種:動態插值(利用vue提供的computed (計算) 屬性 在插值的過程中動態的對所插入的值進行修改) 語法: computed:{ key:function(){ return newKey; } } 如:

{{id *2}}

{{result *2}}

var data = { msg:“

我是標題

”, styles:“color:red”, id:18, title:“我是” } new Vue({ el:"#box3", data:data }) data.msg = “html”;

    5.
    var data = {
        title:"跳轉",
        url1:"http://www.baidu.com",
        url2:"http://www.tianmao.com",
        isTrue:false,
        price:4
    }
    new Vue({
        el:"#box4",
        data:data
    })

6.
 var data = {
        id:4
    }
    var vm = new Vue({
        el:"#box5",
        data:data,
        // vue提供的計算屬性
        computed:{
            // this:指向的是當前vue所例項化的物件
            result:function(){
                return this.id *3;
            }
        }
    })