Vue知识整理，让你快速入门Vue.js：03_2.本地应用：v-text指令、插值表达式、单引号和双引号的使用

被开发耽误的大厨

已于 2022-06-04 23:38:39 修改

阅读量1.7k

点赞数

分类专栏： web前端（H5）文章标签： vue.js javascript 前端

于 2020-03-21 20:44:07 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105005716

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

上篇文章我们介绍了这章所学习的内容，这一节我们学习第一个指令：v-text

一、v-text指令语法介绍

v-text 这个指令的作用是：把数据设置给标签的文本值，也就是textContent这个属性

那么怎么使用它呢？首先我们准备被Vue实例挂载的div标签

接下来在div标签中内部添加一个标签，比如说 h2标签，如下图：

准备工作到这已经搞定，那么如何使用 v-text指令呢？

首先我们为它添加一个 v-text指令，其实就是一个属性，写的位置是标签的内部，

然后为它设置一个具体的数据属性，如："message"，

那么这个message数据属性从哪里来呢？它需要定义在data中

最终解析完毕以后，它会把data中message的值，直接替换给 h2标签的内部

但是这么做有一个缺点就是：无论 h2 标签内部有什么内容，它全部会被替换掉。

二、插值表达式

如果我只想要设置替换部分的内容，可以使用另外一种写法，

使用两个大括号的方式，在标签的内部进行设置，而这种写法也叫做插值表达式

官方提供的示例代码就是使用的这种写法，使用这种写法只有双大括号内部的值会被替换，

其他内容原封不动的被保留。

支持写表达式、单引号和双引号的使用

如果我们还想涉及到一些逻辑代码，它还支持写表达式，

我们来写个字符串的拼接，如：拼接一个感叹号

在插值表达式里面，我们单引号或者双引号都可以使用，因为两边并没有引号，

但是如果是我们的 v-text 指令行内的这种写法，两边因为已经用了双引号，

所以内部我们就只能使用单引号了。

三、实例代码测试

到这语法我们已经演示完毕，下面我们进行代码验证

1、v-text指令使用

（1）实例代码

<!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>01_v-text指令使用</title>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <!-- 无论是message数据属性，还是info都可以，名字随自己定义，只要一一对应即可 -->
        <h2 v-text="message"></h2>
        <h2 v-text="info"></h2>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好程序员!",
                info: "来自中国的"
            }
        })
    </script>

</body>

</html>

（2）效果展示

无论是message数据属性，还是info都可以，名字随自己定义，只要一一对应即可

2、插值表达式_部分替换

（1）实例代码

<!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>02_插值表达式_部分替换</title>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <h2 v-text="message">哈哈哈</h2>
        <h2 v-text="info">哈哈哈</h2>
        <h2>{{info}}哈哈哈</h2>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好程序员!",
                info: "来自中国的"
            }
        })
    </script>

</body>

</html>

（2）效果展示

你会发现前面两个的"哈哈哈"，都被替换掉了，第三行插值表达式的没有被替换

3、v-text指令结合表达式_单双引号

（1）实例代码

<!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>03_v-text指令结合表达式_单双引号</title>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <h2 v-text="message+"?""></h2>
        <h2 v-text="message+'?'"></h2>
        <h2 v-text="info+'?'"></h2>
        <h2>{{info+'?'}}</h2>
        <h2>{{info+"?"}}</h2>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好程序员!",
                info: "来自中国的"
            }
        })
    </script>

</body>

</html>