Vue v-text 插值

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

Vue.js 提供了一些常用的内置指令，这些指令都是以 “v-”作为前缀。其中，v-text指令和插值都可以用于显示文本内容。

 

1. 插值

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的插值：

<p>{{ msg }}</p>

Mustache 标签将会被替代为对应数据对象 data 上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

我要试一试

 

2. v-text指令

v-text 指令用于显示 DOM 对象上文本内容。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。

下面是一个使用 v-text 指令的范例。v-text 指令将 vue 实例中数据 mssage 绑定到 DOM 节点 <p> 上。我们在浏览器中访问该页面，将输出 “Hello,World!”。

<html>
<head>
    <title>编程宝库 Vue教程</title>
</head>
<body>
    <div id="app"> 
      <p v-text="message"></p> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    var app = new Vue({
      el:'#app',	
      data:{
        message:'Hello,World!'
      }
    })
    </script>
</body>
</html>

我要试一试

 

3. v-text 和 {{ }} 的不同

v-text 和 {{ }} 在使用上有一些差异，其中 v-text 将替换整个节点上的内容，而 v-text 更为灵活，可以替换部分内容。比如：

<p>我的内容：{{ message }</p>

运行结果：

我的内容：Hello,World!
<p v-text="message">原来的内容</p>

运行结果：

Hello,World!

使用 v-text 指令，整个节点上的内容被替换了，包括原来已有的内容。

 

4. 使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

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

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

5. Vue 视频教程

视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=7&share_source=copy_web

Vue.js v-html 指令用于设置标签的 innerHTML。我们通过 v-text 或者 {{}} 插值的方式设置文本的内容，Vue 会将数据解释为纯文本，而非原始的 HTML。也就是会把数据中包含的 HTML 标签进行转义。为了输出原始的 HTML，你需要使用 v-html 指令。