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