文本类指令
一 概念
- v-text：文本变量
```html
<p v-text='msg'></p>
<p>{{ msg }}</p>
```
- v-once：一次性文本赋值
```html
<p v-once>{{ msg }}</p>
```
- v-html：html文本变量
```html
<p v-html='msg'></p>
<script>
new Vue({
el: '#app',
data: {
msg: '<b>文本</b>'
}
})
</script>
```
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本类指令</title>
<style type="text/css">
p {
line-height: 21px;
background-color: orange
}
</style>
</head>
<body>
<div id="app">
<!-- html全局属性语法: 全局属性名="属性值" -->
<p v-bind:title="title" a="a" b="b">你是p</p>
<!-- v-model也是对文本操作的指令,操作的是表单元素的value文本 -->
<input type="text" v-model="msg">
<!-- 采用文本指令后,页面标签的内容由vue实例控制,原来用于表示标签的文本均会被替换 -->
<p>{{ msg }}</p>
<!-- eg:原文本会被msg替换 -->
<p v-text='msg'>原文本</p>
<!-- 可以解析带html标签的文本信息 -->
<p v-html='msg'></p>
<!-- v-once控制的标签只能被赋值一次 -->
<p v-once>{{ msg }}</p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 指令: 出现在html标签中可以被vue解析处理的全局属性
new Vue({
el: "#app",
data: {
title: "",
msg: "message"
}
})
</script>
</html>
