Vue.js中的插值(插值表达式)和使用JavaScript表达式

迈不过友情╰ 2024-03-22 16:00 102阅读 0赞

下面demo中使用 \{ \{\}\} 的形式在 html 中获取实例对象对象中 data 的属性值；

**这种使用 \{ \{\}\} 获取值得方式，叫做 插值 或 插值表达式**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </td> 
 <td> <code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;id=</code><code>"div"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ {user_name}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/body&gt;</code> <code>//&nbsp;两种引入方式，任意选择</code> <code>&lt;script&nbsp;src=</code><code>"https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script&nbsp;src=</code><code>"./vue.js"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>app&nbsp;=&nbsp;</code><code>new</code>&nbsp;<code>Vue({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el:</code><code>'#div'</code><code>,&nbsp;&nbsp;</code><code>//&nbsp;设置要操作的元素</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;要替换的额数据</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>user_name:</code><code>'我是一个div'</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

### 数据绑定 ###

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;span&gt;Message:&nbsp;{ {&nbsp;msg&nbsp;}}&lt;/span&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。即便数据内容为一段 html 代码，仍然以文本内容展示

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;id=</code><code>"div"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>文本插值&nbsp;{ {html_str}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>app&nbsp;=&nbsp;</code><code>new</code>&nbsp;<code>Vue({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el:</code><code>'#div'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>html_str:</code><code>'&lt;h2&gt;Vue&lt;h2&gt;'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

浏览器渲染结果：

打开浏览器的 控制台的REPL 环境 输入 app.html\_str = '<s>vue</s>'

浏览器渲染结果就会立刻发生改变： <div id="div">文本插值 <s>vue</s></div>

### Vue.js使用JavaScript表达式 ###

Vue.js 都提供了完全的 JavaScript 表达式支持，但是不能使用 JS 语句；

(表达式是运算，有结果；语句就是代码，可以没有结果)

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 </td> 
 <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;id=</code><code>"app"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;插值&nbsp;&nbsp;&nbsp;插值表达式&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;s&gt;{ {us}}&lt;/s&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;插值表达式可以使用运算符&nbsp;支持三元运算符&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ {us&gt;3?</code><code>'大'</code><code>:</code><code>'小'</code><code>}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;函数调用也可以&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ {hh()}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;对象的调用&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ {obj.name}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;但是不能写逻辑代码,如</code><code>if</code>&nbsp;<code>--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--&nbsp;{ { </code><code>if</code><code>(us&gt;1){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(1)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code><code>else</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(0)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}}}&nbsp;--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>app&nbsp;=&nbsp;</code><code>new</code>&nbsp;<code>Vue({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>el:</code><code>'#app'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>us:1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>hh:</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>4+3;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>obj:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name:</code><code>'李四'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//&nbsp;打印</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(app);</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>