资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Vue.js学习笔记:插值-创新互联

文本:数据绑定最基础的形式就是文本插值,使用一对双大括号

创新互联主要从事成都网站制作、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务大石桥,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

双大括号标签会被相应数据对象的msg属性的值替换,每当这个属性变化时它也会更新

HTML:

Message:`msg`

JS:

var vm = new Vue({
    el:'#test01',
    data:{
        msg:'数据绑定语法--文本插值'
    }
});

{{变量名}}:表示绑定的变量,调用时需要用this.变量名

el:表示指令绑定的元素

vm:表示拥有该指令的上下文ViewModel

示例中的id也可以改为class,但是如果页面中含有多个相同的class的话,只对第一个有效

HTML:

Message:`msg`

JS:

var vm = new Vue({
    el:'.test01',
    data:{
        msg:'数据绑定语法--文本插值'
    }
});

也可以只处理单次插值,今后的数据变化就不会再引起插值更新了,这句话怎么理解呢?看看下面的实例

HTML:


    
    

{{* msg}}

JS:

var vm2 = new Vue({
    el:'#test02',
    data:{
        msg:'内容一起改变了吗?'
    }
});

查看页面效果截图发现,随着输入框内容的改变(无论是添加内容还是删除原来的内容),p标签的内容都不会发生任何改变,也就是说数据变化并没有引起插值更新

Vue.js学习笔记: 插值

双大括号将数据解析成纯文本,而三大括号将数据解析成真正的HTML字符串

HTML:

双大括号解析成纯文本:`msg`
三大括号解析成HTML字符串:{`msg`}

JS:

var vm3 = new Vue({
    el:'#test03',
    data:{
        msg:'链接'
    }
});

var vm4 = new Vue({
    el:'#test04',
    data:{
        msg:'链接'
    }
});

双大括号标签也可以用在HTML特性内

HTML:

页面效果截图:

Vue.js学习笔记: 插值

文本的取值除了可以是string类型以外,还可以是number,boolean,array,json, 我们可以看看下面的实例代码


    

`msg`

    

`msg1`

    

`msg2`

    

`msg3`

    

`arr`

    

`json`

new Vue({
    el:'#box',
    data:{
        msg:'Hello World!',
        msg1:2016,
        msg2:true,
        msg3:false,
        arr:['nokia','samsung','apple','huawei','htc'],
        json:{a:'apple', b:'banana', c:'cherry', d:'durian'}
    }
})

Vue.js学习笔记: 插值

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


网站名称:Vue.js学习笔记:插值-创新互联
网址分享:http://cdkjz.cn/article/codsih.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220