6.Vue中插入值：文本{{}}，原生HTMLv-html，属性v-bind，JavaScript表达式

文章目录插入值文本 {{}}原生HTML v-html插入属性 v-bind插入值在最下方附上完整代码吧，节省篇幅，过程中的介绍都截取部分代码进行说明。文本 {{}}插入文本数据使用{{ 数据名称 }} 的方式。这种方式之前也是经常使用到的，这里不再过多介绍了前文：3. Vue基础指令:{{}}；v-bind；v-on；v-model；v-if；v-for。<span>Message:

色不异空，空不异色

2855人浏览 · 2021-04-29 11:32:27

色不异空，空不异色 · 2021-04-29 11:32:27 发布

文章目录

插入值

插入值

在最下方附上完整代码吧，节省篇幅，过程中的介绍都截取部分代码进行说明。

文本 {{}}

插入文本数据使用{{ 数据名称 }} 的方式。这种方式之前也是经常使用到的，这里不再过多介绍了
前文：3. Vue基础指令:{{}}；v-bind；v-on；v-model；v-if；v-for。

<span>Message: {{ msg }}</span>

原生HTML v-html

使用{{}}的方式会将内容解析为普通文本，如果想要直接插入HTML代码的话，需要使用v-html指令：

<div id="app">
	<div v-html="rawHtml"></div>
</div>

<script>
	const app = {
		data() {
			return {
				rawHtml: "<a href='https://www.baidu.com'>百度一下</a>",
			}
		}
	}

	Vue.createApp(app).mount("#app")
</script>

效果如下：
在这里插入图片描述
可以看到，rawHtml的内容被解析成了HTML
看一下页面结构：

可以看到，rawHtml的内容，被作为div的内容解析到了页面。
注意：

在使用v-html指令的时候需要注意，一定要保证v-html绑定的数据来源可靠，不要将用户输入的内容作为值插入，这样很容易受到XSS攻击。

插入属性 v-bind

想要给某个元素动态插入（绑定）一个属性时，可以使用v-bind指令，这个指令在前边也有提到。
3. Vue基础指令:{{}}；v-bind；v-on；v-model；v-if；v-for。

<div v-bind:id="dynamicId"></div>

注意：

如果绑定的值是null或undefined，那么这个属性将不会被渲染到这个元素上，也就是在网页中这个元素没有这个属性。
对于属性值是布尔值的元素，这个条件和JS在if判断的条件（0,null,undefined,''空字符串是false，其他为true）基本一致，但是有一点不同，如果值是空字符串('')的话，在这里算true。
例如：
```
<button type="button" v-bind:disabled="isButtonDisabled">按钮</button>
<script>
   data() {
   		return {
   			isButtonDisabled: '',
   		}
   	}
   </script>
```
空字符串生效，被解析成为了true

JavaScript表达式

在上述表达式中可以直接使用单个表达式，支持对数据进行操作，但是不能进行变量声明，不能写JavaScript语句。
支持以下形式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

不支持以下形式，会报错。

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>模板语法</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<span>Message: {{message}}</span>
			<div v-html="rawHtml" v-bind:id="dynamicId"></div>
			<button type="button" v-bind:disabled="isButtonDisabled">按钮</button>
			<div>
				{{ number + 1 }}
				<br>
				{{ok ? 'yes':'no'}}
				<br>
				{{message.split('').reverse().join('')}}
				<br>
				<div v-bind:id="'list-' + dynamicId">拼接Id</div>
			</div>
		</div>
	</body>

	<script>
		const app = {
			data() {
				return {
					message: "消息",
					rawHtml: "<a href='https://www.baidu.com'>百度一下</a>",
					dynamicId: 1,
					isButtonDisabled: '',
					number: 1,
					ok: true,
				}
			}
		}

		Vue.createApp(app).mount("#app")
	</script>
</html>