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

最新推荐文章于 2023-05-15 16:50:51 发布

大成子 | 翻身的码农

最新推荐文章于 2023-05-15 16:50:51 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_24520459/article/details/103014597

版权

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

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

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

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

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

Mustache 语法

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

十分简单，页面视图上也成功显示我们的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>