第六节:教你如何在html中绑定数据

上两节我们学习了vue的实例知识:
第4节:vue实例的4个常用选项
第5节:vue 实例的生命周期

提醒一下,这两节的内容在后面实战的时候很重要,如果落下的同学可以回去翻看学习,不必害怕难学,这里没有难学的教程。

这一节,我们学习如何在html上绑定我们实例中的数据。
Mustache 语法
什么叫Mustache语法,别被这高大上的叫法吓到了,其实就是双大括号{{ }}的写法,在之前的章节我们就演示过在视图中显示我们的数据,这是最常见的绑定方式。有了它,我们可以轻松地在视图显示我们的数据并及时自动更新,无需手动控制。
  1. {{ name }}

复制代码
十分简单,页面视图上也成功显示我们的data中的name的值:“前端君”。
绑定纯html
有时候有一种这样的需求,我们的数据包含了一些html的标签代码,比如: 

  1. name:"前端君"
复制代码

文本“前端君”被一个标签包住,而我们在展示的是,需要合理地渲染strong标签,再显示我们想要展示文本内容。这种情况,用原来的双大括号{{  }}方式,就不能满足了,它会渲染成这样:

被当作是普通的文本数据被展示了,这并不是我们想要的结果。这个是时候,你需要用vue提供的v-html指令,用法如下:

复制代码
v-html以属性的形式添加到了div中,值为“name”,也就是我们数据data中的name:
  1. "前端君"
复制代码
我们来看看视图展示的结果:

视图上的“前端君”有了明显的加粗效果,说明标签发挥了作用,我们通过chrome的开发者工具查看解析生成后的html文档,name的值,被解析成html标签,并作为字节点,插入在
中去。
这,就是v-html的作用啦
绑定属性
前面两个都是控制视图展示文本内容,有时候,html标签的属性也很重要,比如:标签的href属性,标签的src属性等。Vue中如何将data中的数据绑定为这些属性的值呢?还是用双大括号 {{  }}的写法吗?

当然不是,这里不需要用双大括号 {{ }},我们用v-bind指令,如下:

  • 复制代码

    v-bind 指令的简写
    对于v-bind指令,如果一个标签中需要绑定多个属性的话,就得连续写多个v-bind。
    问题是没问题,但vue为了我们的代码更简洁易看,提供了v-bind指令的简写,仅需要冒号。
    原本完整的写法:

    复制代码

    简洁的写法:
    复制代码

    此外,需要注意的是:当渲染的属性值是布尔值的时候(true和false),效果就不一样了,并不是简单地将true或者false渲染出来,而是当值为false的时候,属性会被移除。
    我们试试看:

    1.    
    2.    
    3.         我是true
    4.    
    5.    
    6.        我是false
    7.    

  • 复制代码
    我们通过v-bind指令的缩写,给两个button标签的disabled属性绑定值,一个值为true,一个值为false,我们来看看效果:
    我们看到,当属性值设置成true的时候,disabled的值为解析成“disabled”,当属性值设置成false的时候,属性disabled直接被移除掉了。
    支持javascript表达式
    上面讲到的都是将数据简单地绑定在视图上,但事实上,vue还支持我们对数据进行简单的运算:javascript表达式支持
    我们举3个例子演示一下:
    1.加减乘除运算:
    1. {{ num+3 }}

    复制代码
    上面的案例,在渲染的时候,并不是直接渲染data的num,而是对num进行的简单的加法:num+3,渲染的结果为:5。
    2.三元运算符:
    1. {{ ok ? 'yes':'no' }}

    你可能感兴趣的:(vue)