Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model

news2025/3/17 1:53:01

前言

持续学习总结输出中，Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model

概念：指令（Directives）是Vue提供的带有 v- 前缀 的特殊标签属性。可以提高操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为6大类：

  • 内容渲染指令（v-html、v-text）
  • 条件渲染指令（v-show、v-if、v-else、v-else-if）
  • 事件绑定指令（v-on）
  • 属性绑定指令 （v-bind）
  • 列表渲染指令（v-for）
  • 双向绑定指令（v-model）

1、内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

  • v-text（类似innerText）
    使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
    类似 innerText，使用该语法，会覆盖 p 标签原有内容
  • v-html（类似 innerHTML）
    使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
    类似 innerHTML，使用该语法，会覆盖 p 标签原有内容，能够将HTML标签的样式呈现出来。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <div v-html="msg"></div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        msg: `
          <h3>星辰大海</h3>
        `
      }
    })

  </script>

</body>
</html>

运行效果：
请添加图片描述

2、条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

1、v-show

  1. 作用： 控制元素显示隐藏
  2. 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
  3. 原理： 切换 display:none 控制显示隐藏
  4. 场景：频繁切换显示隐藏的场景

2、v-if

  1. 作用： 控制元素显示隐藏（条件渲染）
  2. 语法： v-if= “表达式” 表达式值 true显示， false隐藏
  3. 原理： 基于条件判断，是否创建或移除元素节点
  4. 场景： 要么显示，要么隐藏，不频繁切换的场景

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      line-height: 100px;
      margin: 10px;
      border: 3px solid #000;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #ccc;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-show="flag" class="box">我是v-show控制的盒子</div>
    <div v-if="flag" class="box">我是v-if控制的盒子</div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>

</body>
</html>

运行效果：
请添加图片描述

3、 v-else 和 v-else-if

  1. 作用：辅助v-if进行判断渲染
  2. 语法：v-else v-else-if=“表达式”
  3. 需要紧接着 v-if 使用

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <p v-if="gender === 1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="score >= 90">评级A：奖励电脑一台</p>
    <p v-else-if="score >= 70">评级B：奖励周末郊游</p>
    <p v-else-if="score >= 60">评级C：奖励零食礼包</p>
    <p v-else>评级D：惩罚一周不能玩手机</p>
    <!-- 注意: 需要紧挨着 v-if 一起使用 -->
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 1,
        score: 60
      }
    })
  </script>

</body>
</html>

运行效果：
请添加图片描述

3、事件绑定指令

使用Vue时，为DOM注册事件，语法如下：

  • <button v-on:事件名=“内联语句”>按钮
  • <button v-on:事件名=“处理函数”>按钮
  • <button v-on:事件名=“处理函数(实参)”>按钮
  • v-on: 简写为 @
  1. 内联语句
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!--v-on 注册事件 = 添加监听 + 提供处理逻辑 -->
    <!-- v-on:click="" 中的 v-on:可以简写为@ 工作中我们使用 @click=""-->
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 90
      }
    })
  </script>
</body>
</html>

运行效果：
在这里插入图片描述

  1. 事件处理函数

注意：事件处理函数应该写到一个跟data同级的配置项（methods）中
methods中的函数内部的this都指向Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>切换显示隐藏</title>
  <style>
    button{
      padding:10px 20px;
      border-radius: 4px;
      cursor: pointer;
      background-color: #4fc08d;
      color: #fff;
      border:2px solid #1c8556; 
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">星辰大海</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app4 = new Vue({
      el: '#app',
      data: {
        // data 提供数据
        isShow: true
      },
      methods: {
        // methods 提供处理逻辑函数
        fn () {
          // 让提供的所有methods中的函数，this都指向当前实例
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
</html>

运行效果：
请添加图片描述

3.给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
如果传递了参数，则实参 $event 表示事件对象，固定用法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星辰自动售货机</title>
  <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 400px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>
</head>
<body>

  <div id="app">
    <div class="box">
      <h3>星辰自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="buy(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy (price) {
          this.money -= price
        }
      }
    })
  </script>
</body>
</html>

运行效果：
请添加图片描述

4、属性绑定指令

  1. 作用： 动态设置html的标签属性 比如：src、url、title
  2. 语法：v-bind: 属性名=“表达式”
  3. v-bind: 可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

  • <img v-bind:src="url" />
  • <img :src="url" /> （v-bind可以省略）
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-bind</title>
</head>
<body>
  <div id="app">
    <!-- v-bind:src   =>   :src -->
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 星辰大海'
      }
    })

  </script>
</body>
</html>

运行效果：
请添加图片描述

5、列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项
  • index 是每一项的索引，不需要可以省略
  • arr 是被遍历的数组
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>星辰水果店</h3>
    <ul>
      <li v-for="(item, index) in list">
        {{ item }} - {{ index }}
      </li>
    </ul>

    <ul>
      <li v-for="item in list">
        {{ item }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨', '香蕉']
      }
    })
  </script>
</body>
</html>

运行效果：
请添加图片描述

v-for中的key

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>星辰的书架</h3>
    <ul>
      <!-- v-for 中的 key - 不加 key: v-for 的默认行为会尝试 原地修改元素 (就地复用) -->
      <!-- key作用:给元素添加的唯一标识。 便于Vue进行列表项的正确排序复用。-->
      <!-- key 的值只能是 字符串 或 数字类型 -->
      <!-- 推荐使用 id 作为 key(唯一)，不推荐使用 index 作为 key(会变化，不对应) -->
      <li v-for="(item, index) in booksList">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods: {
        del (id) {
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>
</html>

运行效果：
请添加图片描述

注意：

  1. key 的值只能是字符串 或 数字类型
  2. key 的值必须具有唯一性
  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

6、双向绑定指令

所谓双向绑定就是：

  1. 数据改变后，呈现的页面结果会更新
  2. 页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法： v-model=“变量”

需求： 使用双向绑定实现以下需求

  1. 点击登录按钮获取表单中的内容
  2. 点击重置按钮清空表单中的内容
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
      (1) 数据变化，视图自动更新
      (2) 视图变化，数据自动更新
      可以快速[获取]或[设置]表单元素的内容
     -->
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login () {
          console.log(this.username, this.password)
        },
        reset () {
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>
</body>
</html>

运行效果：
请添加图片描述

总结

指令我们开发 vue 中最基础、最常用、最简单的知识点。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1197040.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java Web——HTTP协议

Java Web——HTTP协议

目录 1. HTTP协议概述 1.1. HTTP数据传输格式 1.2. HTTP协议特点 2. HTTP 1.0和HTTP 1.1 3. HTTP请求协议 3.1. GET方式请求协议 3.2. POST方式请求协议 3.3. GET请求和POST请求的区别 4. HTTP相应协议 4.1. 响应状态码 如果两个国家进行会晤需要遵守一定的礼节。所以…
阅读更多...
WMS配送中心主要业务流程

WMS配送中心主要业务流程

业务流程图 入库 波次出库 按门店和门店所属送货路线确定出库波次 入库 出库 移库、封仓 门店欠货能要点 1. 日常补货&#xff1a;分拣仓位商品小于当前商品在该位置的补货下限的时候&#xff1b;生成对此进行补货任务&#xff1b;补货完成后确认任务&#xff0c;系统变更库存…
阅读更多...
win10使用mingw安装OpenCV4.8

win10使用mingw安装OpenCV4.8

1. cmake安装 下载链接如下https://github.com/Kitware/CMake/releases/download/v3.27.7/cmake-3.27.7-windows-x86_64.zip 解压后放到指定目录后&#xff0c;添加bin目录到环境变量即可。 2. mingw安装 下载链接如下(下图的x86_64-posix-sjlj)&#xff1a; Download x86_…
阅读更多...
DevChat：提升编程效率的AI编程助手

DevChat：提升编程效率的AI编程助手

一、前言 1、当前开发的痛点&#x1f616; 在软件开发过程中&#xff0c;开发者经常需要编写复杂的代码&#xff0c;如数据结构、算法、网络通信等&#xff0c;这些都需要耗费大量的时间和精力。同时&#xff0c;不同的编程语言和框架也会给开发者带来许多不便&#xff0c;例如…
阅读更多...
Hadoop入门——数据分析基本步骤

Hadoop入门——数据分析基本步骤

文章目录 1.概述2.分析步骤2.1第一步 明确分析目的和思路2.2第二步 数据收集2.3第三步 数据处理2.4第四步 数据分析2.5第五步 数据展现2.6第六步 报告撰写 3.总结 1.概述 2.分析步骤 2.1第一步 明确分析目的和思路 2.2第二步 数据收集 2.3第三步 数据处理 2.4第四步 数据分析 …
阅读更多...
C语言每日一题（28） 反转链表

C语言每日一题（28） 反转链表

牛客网 BM1 反转链表 题目描述 描述 给定一个单链表的头结点pHead(该头节点是有值的&#xff0c;比如在下图&#xff0c;它的val是1)&#xff0c;长度为n&#xff0c;反转该链表后&#xff0c;返回新链表的表头。 数据范围&#xff1a; 0≤n≤1000 要求&#xff1a;空间复…
阅读更多...
数据分析实战 | SVM算法——病例自动诊断分析

数据分析实战 | SVM算法——病例自动诊断分析

目录 一、数据分析及对象 二、目的及分析任务 三、方法及工具 四、数据读入 五、数据理解 六、数据准备 七、模型训练 八、模型应用及评价 一、数据分析及对象 CSV文件——“bc_data.csv” 数据集链接&#xff1a;https://download.csdn.net/download/m0_70452407/88…
阅读更多...
【C++】智能指针（一）

【C++】智能指针（一）

这篇文章介绍下C的智能指针&#xff0c;当然&#xff0c;可能没有你想的那么智能。 为什么需要智能指针1 void remodel(string& str) {string* ps new string(str);str *ps;return; }这里不讨论这个函数有没有意义&#xff0c;在这段代码中&#xff0c;很明显&#xff…
阅读更多...
arduino 简易智能花盆

arduino 简易智能花盆

编辑器&#xff1a;arduino IDE 主板&#xff1a;arduino uno 传感器&#xff1a; 0.96寸的OLED屏&#xff08;四脚&#xff09; 声音模块 土壤温湿度模块 DS18B20温度模块&#xff08;这里用到防水的&#xff09; 光敏电阻模块&#xff08;买成三脚的了只能显示高低&#x…
阅读更多...
state 和 props 有什么区别？

state 和 props 有什么区别？

一、state 一个组件的显示形态可以由数据状态和外部参数所决定&#xff0c;而数据状态就是 state&#xff0c;一般在 constructor 中初始化 当需要修改里面的值的状态需要通过调用 setState 来改变&#xff0c;从而达到更新组件内部数据的作用&#xff0c;并且重新调用组件 r…
阅读更多...
Linux操作系统下对c语言程序的编译和执行过程gcc，编译链接过程

Linux操作系统下对c语言程序的编译和执行过程gcc，编译链接过程

目录 1.gcc,g,gdb安装 2.gcc分布编译链接 3.编译链接过程 4.执行 4.1 如何执行 4.2 两步执行与一步执行 4.3 多文件的编译执行 1.gcc,g,gdb安装 命令行写gcc,g,gdb根据提示安装:sudo apt install gcc/g/gdb 2.gcc分布编译链接 (1)预编译: gcc -E main.c -o main.i (2)…
阅读更多...
视频剪辑技巧：探索画中画视频剪辑，如何制作引人入胜的视觉效果

视频剪辑技巧：探索画中画视频剪辑，如何制作引人入胜的视觉效果

在视频制作领域&#xff0c;画中画视频剪辑是一种备受瞩目的技术&#xff0c;它可以将多个视频画面叠加在一起&#xff0c;形成一种独特的视觉效果。这种剪辑技巧可以让观众同时看到两个或多个视频片段&#xff0c;创造出一种引人入胜的视觉体验。在开始画中画视频剪辑之前&…
阅读更多...
C++算法:矩阵中的最长递增路径

C++算法:矩阵中的最长递增路径

涉及知识点 拓扑排序 题目 给定一个 m x n 整数矩阵 matrix &#xff0c;找出其中 最长递增路径 的长度。 对于每个单元格&#xff0c;你可以往上&#xff0c;下&#xff0c;左&#xff0c;右四个方向移动。 你 不能 在 对角线 方向上移动或移动到 边界外&#xff08;即不允…
阅读更多...
工商业微电网储能盈利方式研究笔记

工商业微电网储能盈利方式研究笔记

1. 光储微电网 1.1. 关于光储微电网 光储微电网可以看成是一组由分布式光伏、储能装置、本地负荷组成的包括发、输、配、用管理系统在内的小型局域电网&#xff0c;并通过唯一的公共连接点接入大电网&#xff0c;既可以并网运行也可以独立运行。 发展分布式光储微电网的意义…
阅读更多...
STM32 X-CUBE-AI:Pytorch模型部署全流程

STM32 X-CUBE-AI:Pytorch模型部署全流程

文章目录 概要版本&#xff1a;参考资料STM32CUBEAI安装CUBEAI模型支持LSTM模型转换注意事项模型转换模型应用1 错误类型及代码2 模型创建和初始化3 获取输入输出数据变量4 获取模型前馈输出模型应用小结 小结 概要 STM32 CUBE MX扩展包&#xff1a;X-CUBE-AI部署流程&#xf…
阅读更多...
ROS 多级tf坐标转换

ROS 多级tf坐标转换

题目 现有一移动机器人&#xff0c;该机器人的基坐标系为“base_link”&#xff0c;机器人包含3个子坐标系分别为“joint1”&#xff0c;“joint2”&#xff0c;“joint3”。 要求&#xff1a;利用多坐标转换&#xff0c;实现joint1下的坐标向joint2下的坐标转换&#xff0c;…
阅读更多...
AMD64内存属性详解

AMD64内存属性详解

本文参考文档为AMD64 Architecture Programmer’s Manual Volume 2: System Programming&#xff0c;版本号3.41&#xff0c;这不是对原英文文档的翻译&#xff0c;但是所有内容的排版都是根据原手册的排版来的&#xff0c;如有与官方文档冲突的内容&#xff0c;以官方文档为准…
阅读更多...
[LeetCode]-622. 设计循环队列

[LeetCode]-622. 设计循环队列

目录 662. 设计循环队列 题目 思路 代码 662. 设计循环队列 622. 设计循环队列 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/design-circular-queue/ 题目 设计你的循环队列实现。 循环队列是一种线性数据结构&#xff0c;其操作表现基于 FIFO&…
阅读更多...
推荐几个宝藏app

推荐几个宝藏app

立冬后&#xff0c;真尼玛冷&#xff0c;哎&#xff01;记得多穿点衣服呀&#xff0c;老铁们&#xff01;&#xff01; GKD 去广告神器 下载网址&#xff1a;https://github.com/gkd-kit/gkd 特性&#xff1a; 它不仅支持跳过开屏广告&#xff0c;还支持跳过弹窗广告等&#xf…
阅读更多...
Shopee活动取消规则是什么？shopee官方促销活动怎么取消？

Shopee活动取消规则是什么？shopee官方促销活动怎么取消？

作为一家知名的电商平台&#xff0c;shopee官方对于消费者取消促销活动的请求给予了相应的规定和处理流程。 shopee活动取消规则是什么&#xff1f; 首先&#xff0c;消费者应该明确了解虾皮的促销活动取消规则。根据虾皮的官方规定&#xff0c;消费者在参与促销活动之前&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023