v-text的用法

fushan2012

已于 2022-02-22 15:31:07 修改

阅读量4.7k

点赞数

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

于 2022-02-22 14:16:29 首次发布

本文链接：https://blog.csdn.net/fushan2012/article/details/123067050

版权

Vue.js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1、Vue指令之v-text

v-text 指令用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。
v-text 指令的简写形式为 {{}}，只支持单向绑定，同时可以支持逻辑运算。
v-text 指令与 Vue.js 插值表达式语法略有区别，v-text 指令会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符。

2、v-text使用示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text指令</title>
</head>

<body>
	<div id="app">
	　　<p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
	　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
	　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
	</div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	　　let app = new Vue({
	　　el: "#app",
	　　data: {
	　　　　message: "<span>通过双括号绑定</span>",
	　　　　html: "<span>html标签在渲染的时候被解析</span>",
	　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
	　　}
	});
	</script>
</body>
</html>