5_vue learning record _ the code data binding _html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>
</body>
</html>

This explanation is vue objects, how to hate among html html code.
This is the meaning.
First of all, we see that the above code which is mediocre.
But the message which, with the last not the same.

The last is the text. This is the html code.
Of course, this is no problem.
Since vue them, just put it in the data.
The html which, to quote vue among the data.
Front, we already know html is to use {{}} to reference the text.
But if it is html code, how it will reference it?

<div v-html="message"></div>

v-htmlIt looks like the same property of the label.
With reference to v-html vue properties, it is possible to html code, on the label where the v-html.

Guess you like

Origin www.cnblogs.com/gnuzsx/p/11973186.html