Vue 3_1.vue中的v-text和v-html以及v-bind的使用

v-text直接以纯文本展示v-html则会解析html标签在我们项目中的html中添加以下代码：<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8">&

杰克L

3147人浏览 · 2021-05-31 00:39:08

杰克L · 2021-05-31 00:39:08 发布

v-text直接以纯文本展示
v-html则会解析html标签

在我们项目中的html中添加以下代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="jieke">
			<div v-text="message"></div> //用v-text引用message的值
			<div v-html="message"></div> //用v-html引用message的值
		</div>
	</body>
	<script>
		new Vue({
			el: "#jieke", //接管id名为jieke的区域
			data: {
				message: "<h1>Hello Vue</h1>"  //message的值
			}
		})
	</script>
</html>

运行结果：
在这里插入图片描述

v-text直接以纯文本形式展示message的值
v-html则会解析html

v-bind:

插值表达式不能用于html标签的属性取值，要想给html标签的属性设置变量的值，需要使用v-bind。
v-bind也可以简化写法，直接使用：
接下来是我们html中的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="jieke">
			<font v-bind:color="ys1">Hello</font> //使用v-bind给属性绑定ys1的值
			<font :color="ys2">Vue</font> //使用v-bind给属性绑定ys2的值
		</div>
	</body>
	<script>
		new Vue({
			el: "#jieke", //接管id名为jieke的区域
			data:{
				ys1:"blue",
				ys2:"red"
			}
		});
	</script>
</html>

运行结果：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^