<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
</script>
</body>
</html>
v-once 表示只执行一次数据的变换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<h2 v-html="url"></h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
v-html主要作用是用来讲字符串变为html语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<h2>{{message}}</h2>
<h1 v-pre>{{message}}</h1>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
}
})
</script>
</body>
</html>
v-pre用来原封不动的显示一个内容。例如显示带有mstache语法。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 [v-cloak]{ 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="app" v-cloak> 14 {{message}} 15 </div> 16 <script src="../vue.js"></script> 17 <script> 18 setTimeout(function () { 19 const app = new Vue({ 20 el: '#app', 21 data: { 22 message: 'hello' 23 } 24 }) 25 },1000) 26 </script> 27 </body> 28 </html>
v-cloak 用来显示，该元素是否会带有v-cloak属性。当还没有vue代码还没有加载成功的时候，该标签就会带有v-cloak属性。当vue加载好了。