vue.js基础-属性

第一种:文本插值
如:

{{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;
            }
        }
    })