vue 的v-pre指令和pre标签
vue 的v-pre指令和pre标签vue的pre指令不加v-pre代码不加v-pre效果图加v-pre代码加v-pre效果图vue的pre标签不加pre标签代码不加pre标签效果图加pre标签代码加pre标签效果图vue的pre指令v-pre指令说明:跳过这个元素和它的子元素的编译过程。可以用来显示原始标签。跳过大量没有指令的节点会加快编译。不加v-pre代码<!DOCTYPE html&
·
vue 的v-pre指令和pre标签
1. vue的pre指令
v-pre指令说明:跳过这个元素和它的子元素的编译过程。可以用来显示原始标签。跳过大量没有指令的节点会加快编译。
不加v-pre代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue</title>
<script type="text/javascript" src="C:/Users/XXXX/Desktop/Javascript/vue.js"></script>
</head>
<body>
<div id="app">
<!--没有加v-pre指令-->
<div>{{ message}}<p>{{ message }}</p></div>
</div>
<script>
var vueObj = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
不加v-pre效果图
不加v-pre指令时,显示了VUE实例的data中定义的message变量的值
加v-pre代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue</title>
<script type="text/javascript" src="C:/Users/qingminglong/Desktop/Javascript/vue.js"></script>
</head>
<body>
<div id="app">
<!--加v-pre指令-->
<div v-pre>{{ message}}<p>{{ message }}</p></div>
</div>
<script>
var vueObj = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
加v-pre效果图
加v-pre指令跳过这个元素和它的子元素的编译过程,所以div元素和它的子元素p都是显示{{ message}}
2. vue的pre标签
识别json对象中的\n\t等转义字符,展示原始的JSON对象结构。
不加pre标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue</title>
<script type="text/javascript" src="C:/Users/qingminglong/Desktop/Javascript/vue.js"></script>
</head>
<body>
<div id="app">
<!--不加v-pre标签-->
<div>{{jsonData}}</div>
</div>
<script>
var vueObj = new Vue({
el: '#app',
data: {
jsonData: {
"key": "名字",
"value": "张三丰"
}
}
});
</script>
</body>
</html>
不加pre标签效果图
不加pre标签,不能识别json对象中的\n\t等转义字符
加pre标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue</title>
<script type="text/javascript" src="C:/Users/qingminglong/Desktop/Javascript/vue.js"></script>
</head>
<body>
<div id="app">
<!--加v-pre标签-->
<pre>{{jsonData}}</pre>
</div>
<script>
var vueObj = new Vue({
el: '#app',
data: {
jsonData: {
"key": "名字",
"value": "张三丰"
}
}
});
</script>
</body>
</html>
加pre标签效果图
加了pre标签,识别到json对象中的\n\t等转义字符
更多推荐
已为社区贡献1条内容
所有评论(0)