html怎么绑定数据,06、如何在html中绑定数据

1、Mustache语法

就是双大括号{{}}的写法，有了它，我们可以在视图显示我们的数据并及时自动更新，无需手动控制。

{{ name }}

let app = new Vue({

el: '#app',

data: {

name: '前端学习'

}

})

页面上就会显示——前端学习。

2、绑定纯html

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

name: '前端学习'

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

前端学习

这时候可以用vue提供的v-html指令：

let app = new Vue({

el: '#app',

data: {

name: '前端学习‘

}

})

效果图.png

3、绑定属性

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

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

百度

let app = new Vue({

el: '#app',

data: {

link: 'http://www.baidu.com'

}

})

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

效果图.png

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

另外 v-bind 有简写方式，就仅仅是冒号 :。

百度

百度

4、支持JavaScript表达式

加减乘除运算：

{{ num+3 }}

let app = new Vue({

el:"#app",

data:{

num:2

}

});

效果图.png

三元运算符：

{{ ok ? 'yes':'no' }}

let app = new Vue({

el:"#app",

data:{

ok:true

}

});

效果图.png

字符串拼接

百度

let app = new Vue({

el:"#app",

data:{

host:'www.baidu.com'

}

});

效果图.png

注意：

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

小结

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