一. v-html的使用
v-html与mustache语法相同的地方是可以渲染数据,但v-html最特别的地方在于它可以渲染html标签。
某些情况下,我们从服务器请求到的数据本身就是一个HTML代码,如果我们直接通过{{}}来输出,会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。如果我们希望解析出HTML展示,可以使用v-html指令。
- 该指令后面往往会跟上一个string类型
- 会将string的html解析出来并且进行渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color: pink;
text-shadow: 2px 2px 2px red;
}
</style>
</head>
<body>
<div id="app">
<div v-html="message"></div>
<div v-html="msg"></div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '<h2>hello world</h2>',
msg: '<p>v-html的使用</p>',
}
})
</script>
</body>
</html>
二. v-text指令
v-text作用和mustache比较类似,都是用于将数据展示在界面中。
v-text通常接受一个string类型,它不能解析html标签,它相当于mustache语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color: pink;
text-shadow: 2px 2px 2px red;
}
</style>
</head>
<body>
<div id="app">
<h2 v-text="message"></h2>
<div v-text="msg"></div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello world',
msg: '<p>v-html的使用</p>',
}
})
</script>
</body>
</html>