码云学习 Vue3 2021-07-08

09. [基础]插值表达式和v-bind数据绑定

AI 概述

插值表达式是什么？插值表达式输出 html 标签 v-html 指令插值表达式只作一次渲染 v-once插值表达式中是可以使用 JS 表达式的v-bind 指令的使用通过前两节内容终于学完了 Vue3.x 中的生命周期函数了，因为这套教程默认你是没有 Vue2.x 的基础的，所以就不讲解 Vue2 和 Vue3 生命周期的区别了，你只要...

文章目录隐藏

插值表达式是什么？
插值表达式输出 html 标签 v-html 指令
插值表达式只作一次渲染 v-once
插值表达式中是可以使用 JS 表达式的
v-bind 指令的使用

通过前两节内容终于学完了 Vue3.x 中的生命周期函数了，因为这套教程默认你是没有 Vue2.x 的基础的，所以就不讲解 Vue2 和 Vue3 生命周期的区别了，你只要记住 Vue3 的 8 个生命周期就可以了。这节我们主要学习两个模板语法：插值表达式和 v-bind 的使用。

插值表达式是什么？

我以前在教程中经常说的字面量，其实正确叫法应该叫做插值表达式，当然我们公司大部分还是叫字面量的，也就是我们经常看到的{{xxxx}}这样的东西。

我们复制上节的代码，新建一个Demo9.html，然后去掉生命周期相关的内容，这样就变成了一个简单的 Vue 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'mybj123.com'
            }
        },
        methods: {
            handleItemClick() {
                this.message = this.message == 'mybj123.com' ? "码云笔记" : "mybj123.com"
            }
        },
        template: "<h2 v-on:click='handleItemClick'>{{message}}</h2>"
    })
    const vm = app.mount("#app")
</script>
</html>

这时候我们看到在template属性中的{{message}}就是插值表达式。也就是说利用这种形式，可以使用 data 中的变量，展示在模板中。

插值表达式输出 html 标签 v-html 指令

如果我想在变量里，编写一些 html 的标签，然后输出展现在页面中，这时候会出现点小问题。我们先修改代码，看看问题所在。例如在 message 中加入<i>标签。

return {
    message: '<i>mybj123.com</i>'
}

这时候如果什么都不做，直接输出，你在浏览器中看到的结果就是下面的样子。

<i>mybj123.com</i>

这并不是你想要的结果，这时候需要使用v-html的标签解决这个问题。把 template 属性的部分改成下面的样子。需要注意的是这里要改成"`"符号，否则不能使用双引号这种形式

template: `<h2 v-html="message"> </h2>`

这时候再预览，就可以看到浏览器中的字变成了斜体。

插值表达式只作一次渲染 v-once

现在这种插值表达式，是跟着 data 中的数据一起变化的，也就是我们常说的数据双向绑定。但是如果我希望一个插值表达式，只有在第一次渲染取 data 中的值，而以后不再跟随 data 变化，这时候就要用到v-once指令。

先来看一下目前这种代码，我们为h2标签，加入相应事件handleItemClick，代码如下。

template: `<h2 v-on:click="handleItemClick" v-html="message"> </h2>`

这时候在浏览器中可以看到，我们每点击一次 h2 标签，message的值都是变化的。再改写一下代码。

template: `<h2 
                v-on:click="handleItemClick" 
                v-html="message"
                v-once
            > </h2>`

加入了v-once后，无论 data 中的数据如何变化，模板也不会再次重新渲染了，这就是v-once的变化。

插值表达式中是可以使用 JS 表达式的

其实在插值表达式中是可以使用 JS 表达式的，最常用的表达式是三元运算符。比如下面这样的代码也是可以的。我们在 data 中新声明一个变量count，用三元运算符判断是否是大于 2，如果大于 2 显示大，小于 2 显示小，编写代码如下：

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '<i>mybj123.com</i>',
                count: 5
            }
        },
        methods: {
            handleItemClick() {
                this.message = this.message == 'mybj123.com' ? "码云笔记" : "mybj123.com"
            }
        },
        template: `<h2 
        v-on:click="handleItemClick" 
        v-html="message"
        v-once></h2>
        <div>{{count>2?'大':'小'}}</div>`
    })
    const vm = app.mount("#app")
</script>

当然你也可以使用一些简单的表达式，比如下面这些样子的 JS 表达式.

<div>{{'mybj123'+'.com'}}</div>
<div>{{1+2}}</div>

这些形式的表达式都是可以的，但是如果你想用 if 语句，就是不可以的，因为只能用 JS 表达式而不能用语句。

v-bind 指令的使用

现在我们给 h2 标签加入一个 title 属性，属性的值也想使用message。代码如下：

<h2 
  v-on:click="handleItemClick" 
  v-html="message"
  v-once
  title="message"
> </h2>`

这时候浏览器中鼠标放上时显示的确实message这个单词，而并没有出现我们想要的结果。这时候就可以使用v-bind标签了。写成下面的样式就可以了。

v-bind:title="message"

现在来总结一下，本文我们先学习了插值表达式和一些特殊情况的用法，从而引出了v-html指令、v-once指令和在插值表达式中使用 JS 表达式，然后又学习了v-bind指令。

以上关于09. [基础]插值表达式和v-bind数据绑定的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 6 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 09. [基础]插值表达式和v-bind数据绑定