vue常用指令(v-text)

发布时间:2024年01月23日

一、v-text 指令

  • 作用: 获取data数据, 设置标签的内容.

二、代码演示

1、v-text 获取data数据,设置标签内容,会覆盖之前的内容体

  1. 代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <h1 v-text="testValue">world</h1>
        </div>
      </body>
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            testValue: "hello",
          },
        });
      </script>
    </html>
    
    
  2. 测试结果:
    在这里插入图片描述

    可以看到 内容体 被 标签内容 覆盖了。

2、使用插值表达式不会覆盖

  1. 修改代码

    <!DOCTYPE html>
    <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
     </head>
     <body>
       <div id="app">
         <!-- <h1 v-text="testValue">world</h1> -->
    
         <h1>{{testValue}}world</h1>
       </div>
     </body>
     <script src="js/vue.min.js"></script>
     <script>
       var Vm = new Vue({
         el: "#app",
         data: {
           testValue: "hello",
         },
       });
     </script>
    </html>
    
    
  2. 测试结果

在这里插入图片描述

3、拼接字符串

  1. 修改代码

    <!DOCTYPE html>
    <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
     </head>
     <body>
       <div id="app">
         <!-- <h1 v-text="testValue">world</h1> -->
    
         <!-- <h1>{{testValue}}world</h1> -->
    
         <h1 v-text="testValue+1"></h1>
         <h1 v-text="testValue+' world'"></h1>
       </div>
     </body>
     <script src="js/vue.min.js"></script>
     <script>
       var Vm = new Vue({
         el: "#app",
         data: {
           testValue: "hello",
         },
       });
     </script>
    </html>
    
    
  2. 测试结果

    在这里插入图片描述

文章来源:https://blog.csdn.net/CAUC_lin/article/details/135764396
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。