最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

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

Vuejs rockyxia 4218浏览

写在前面

上两节我们学习了vue的实例知识:

第4节:vue实例的4个常用选项

第5节:vue 实例的生命周期

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

这一节,我们学习如何在html上绑定我们实例中的数据。

Mustache 语法

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

<div id="app">{{ name }}</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      name:"前端君"
    }
  });
</script>

十分简单,页面视图上也成功显示我们的data中的name的值:“前端君”。

绑定纯html

有时候有一种这样的需求,我们的数据包含了一些html的标签代码,比如:

 name:"<strong>前端君</strong>"

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

(这不是我想要的)

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

<div id="app" v-html="name"></div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      name:"<strong>前端君</strong>"
    }
  });
</script>

v-html以属性的形式添加到了div中,值为“name”,也就是我们数据data中的name:

"<strong>前端君</strong>"

我们来看看视图展示的结果:

(这才是我想要的效果)

视图上的“前端君”有了明显的加粗效果,说明<strong>标签发挥了作用,我们通过chrome的开发者工具查看解析生成后的html文档,name的值,被解析成html标签,并作为字节点,插入在<div id=”app”></div>中去。

这,就是v-html的作用啦。

绑定属性

前面两个都是控制视图展示文本内容,有时候,html标签的属性也很重要,比如:<a>标签的href属性,<img>标签的src属性等。Vue中如何将data中的数据绑定为这些属性的值呢?还是用双大括号{{ }}的写法吗?

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

<div id="app">
  <!--在href前用v-bind:修饰-->
  <a v-bind:href="link">hello官网</a>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      link:"http://hello.com"
    }
  });
</script>

在视图中的a标签,我们在<a>标签加上v-bind:来修饰href属性,而它的值就是data中的属性link。我们来看看解析渲染的html页面效果。

(href属性的值成功解析出来了)

标签<a>的属性href的值成功地绑定了data数据link的值,通过v-bind指令,就成功地将数据成功地绑定在视图的标签的属性中。

v-bind 指令的简写

对于v-bind指令,如果一个标签中需要绑定多个属性的话,就得连续写多个v-bind

问题是没问题,但vue为了我们的代码更简洁易看,提供了v-bind指令的简写,仅需要冒号。

原本完整的写法:

<!--完整的写法-->
<a v-bind:href="link">hello官网</a>

简洁的写法:

<!--缩写-->
<a :href="link">hello官网</a>

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

我们试试看:

<div id="app">
  <!--我们用缩写的语法-->
  <button :disabled="dis_true">我是true</button>
  <button :disabled="dis_false">我是false</button>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      dis_true:true,
      dis_false:false
    }
  });
</script>

我们通过v-bind指令的缩写,给两个button标签的disabled属性绑定值,一个值为true,一个值为false,我们来看看效果:

(第二个button的disbaled属性被移除了)

我们看到,当属性值设置成true的时候,disabled的值为解析成“disabled”,当属性值设置成false的时候,属性disabled直接被移除掉了。

支持javascript表达式

上面讲到的都是将数据简单地绑定在视图上,但事实上,vue还支持我们对数据进行简单的运算:javascript表达式支持。

我们举3个例子演示一下:

1.加减乘除运算:

<div id="app">{{ num+3 }}</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      num:2
    }
  });
</script>

上面的案例,在渲染的时候,并不是直接渲染data的num,而是对num进行的简单的加法:num+3,渲染的结果为:5。

(结果为:5)

2.三元运算符:

<div id="app">{{ ok ? 'yes':'no' }}</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      ok:true
    }
  });
</script>

三元运算符计算,上面元算的结果为:“yes”。

(三元运算后的结果为:“yes”)

3.字符串拼接:

<div id="app">
  <a :href="'http://'+host">hello官网</a>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      host:'hello.com'
    }
  });
</script>

<a>标签的href属性的值通过两个字符串的拼接起来,我们看看最后拼接效果:

(字符串拼接成功)

注意:

虽然vue支持javascript表达式运算,我们只会在运算比较简单的情况下才会这么玩,当运算比较繁琐复杂的时候,一定要用vue的computed属性来进行计算。

本节小结

在视图绑定数据的方法:Mustache语法(双大括号语法),绑定纯HTML,绑定属性,支持javascript表达式的写法,以及表达式写法和computed区别。

本系列教程来自 web前端教程 微信公众号。

转载请注明:Rockyxia Web技术博客 » Vue第六节:教你如何在html中绑定数据
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)