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

你可能感兴趣的:(html怎么绑定数据)