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 v-html 指令

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