05_Vue指令篇之文本内容指令

1 v-text 纯文本指令

主要作用:替换元素内的内容

1.1 v-text 实例演示


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01_vue指令文本内容_v-texttitle>
head>
<body>
	
	<div class="app" v-text="text">
		<span v-text="text">v-text指令的主要作用在于替换标签的内容span>
	div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
	var app = new Vue({
		el:'.app',
		data: {
			text:'hello world',
		},
	});
script>
html>

结果如下图:
05_Vue指令篇之文本内容指令_第1张图片

2 v-html 文本指令

主要作用:在于替换标签的内容, 如果替换字符串中含有html标签元素,会被解析

1.1 v-html 实例演示


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>02_vue指令文本内容_v-htmltitle>
head>
<body>
	
	<div class="app" v-html="text">
		<span v-text="text">v-html指令的主要作用在于替换标签的内容, 如果替换字符串中含有html标签元素,会被解析span>
	div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
	var app = new Vue({
		el:'.app',
		data: {
			text:'

hello world!

'
, }, });
script> html>

结果如下图:
05_Vue指令篇之文本内容指令_第2张图片

3 v-text 和 v-html 的区别

v-text指令只替换文本内容,如果是HTML代码段也不会被解析;v-html指令在替换文本内容时,如果目标内容不是纯文本,是一段HTML代码段会被浏览器解析渲染。

4 使用注意事项

  • 1)v-text指令是更新元素的 textContent(完全替换)。如果要实现更新元素部分的 textContent需求 ,请使用 {{ }} 插值进行操作;
  • 2)v-html指令在网站上动态渲染任意 HTML 是非常危险的,因为容易导致XSS 攻击。只在可信内容上使用 v-html,永远不要在用户提交的内容上使用;

你可能感兴趣的:(Vue前端框架)