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

前言

持续学习总结输出中，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 中最基础、最常用、最简单的知识点。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

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第四步 数据分析 …
阅读更多...
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. 响应状态码 如果两个国家进行会晤需要遵守一定的礼节。所以…
阅读更多...
ConcurrentHashMap详解

ConcurrentHashMap详解

要避免 HashMap 的线程安全问题&#xff0c;有多个解决方法&#xff0c;比如改用 HashTable 或者 Collections.synchronizedMap() 方法。 但是这两者都有一个问题&#xff0c;就是性能&#xff0c;无论读还是写&#xff0c;他们两个都会给整个集合加锁&#xff0c;导致同一时间…
阅读更多...
顺序图——画法详解

顺序图——画法详解

百度百科的定义&#xff1a; 顺序图是将交互关系表示为一个二维图。纵向是时间轴&#xff0c;时间沿竖线向下延伸。横向轴代表了在协作中各独立对象的类元角色。类元角色用生命线表示。当对象存在时&#xff0c;角色用一条虚线表示&#xff0c;当对象的过程处于激活状态时&…
阅读更多...
逐步学习 Swagger enum：从入门到精通

逐步学习 Swagger enum：从入门到精通

enum 是 Swagger 规范中用来定义枚举类型的一种方式。它允许开发者在 API 文档中明确列出该接口的参数、返回值或请求体中可接受的枚举值。通过使用 Swagger enum&#xff0c;开发者可以更清晰地描述 API 的输入和输出&#xff0c;提高 API 文档的可读性和可维护性。 enum 使用…
阅读更多...
ROS 多级tf坐标转换

ROS 多级tf坐标转换

题目 现有一移动机器人&#xff0c;该机器人的基坐标系为“base_link”&#xff0c;机器人包含3个子坐标系分别为“joint1”&#xff0c;“joint2”&#xff0c;“joint3”。 要求&#xff1a;利用多坐标转换&#xff0c;实现joint1下的坐标向joint2下的坐标转换&#xff0c;…
阅读更多...
YOLOv8-seg改进：复现HIC-YOLOv5，HIC-YOLOv8-seg助力小目标分割

YOLOv8-seg改进：复现HIC-YOLOv5，HIC-YOLOv8-seg助力小目标分割

🚀🚀🚀本文改进：HIC-YOLOv8-seg：1)添加一个针对小物体的额外预测头，以提供更高分辨率的特征图2）在backbone和neck之间采用involution block来增加特征图的通道信息；3）在主干网末端加入 CBAM 的注意力机制； 🚀🚀🚀HIC-YOLOv8-seg小目标分割检测&复杂场景…
阅读更多...
find和grep命令的简单使用

find和grep命令的简单使用

find和grep命令的简单使用 一、find例子--不同条件查找 二、grep正则表达式的简单说明例子--简单文本查找例子--结合管道进行查找 一、find find 命令在指定的目录下查找对应的文件。 find [path] [expression]● path 是要查找的目录路径&#xff0c;可以是一个目录或文件名…
阅读更多...
Vue3-组合式API下的父传子和子传父

Vue3-组合式API下的父传子和子传父

组合式API下的父传子 基本思想&#xff1a; 1.父组件中给子组件绑定组件 2.子组件内部通过props选项接收 const propsdefineProps({属性名:类型}) 由于script上写了setup&#xff0c;所以无法直接配置props选项&#xff0c;所以需要借助于“编译器宏”函数接收传递的数据 …
阅读更多...
GPT4 Turbo 究竟更新了什么

GPT4 Turbo 究竟更新了什么

GPT4 Turbo 究竟更新了什么 记忆力和上下文理解能力增强 现在的GPT4可以理解128K的文本&#xff0c;相当于几百页的内容&#xff0c;你的GPT4再也不会忘记你之前说的什么了&#xff0c;换句话说之前他只能记住一篇文章&#xff0c;而现在可以记住一整本书的内容了 API降价 输入…
阅读更多...
基于FANUC工业机器人的坐标系转换、多视角拼接与三维重建

基于FANUC工业机器人的坐标系转换、多视角拼接与三维重建

0.简介 总体任务&#xff1a;机械臂末端安装三维相机&#xff0c;绕着工件进行拍摄&#xff0c;并在计算机中将每次拍摄的点云合并在同一个坐标系下&#xff0c;从而获得更加完整全面的点云。机械臂&#xff1a;FANAUC相机&#xff1a;梅卡曼德技术方案&#xff1a;使用相机外…
阅读更多...
零代码+分布式微服务架构打造新一代一站式服务集成平台

零代码+分布式微服务架构打造新一代一站式服务集成平台

目 录 01 项目背景 02 普元ESB产品介绍 03 新版本功能特性 04 应用案例‍‍‍‍ 05 展望与发展 01 项目背景 企业在实现数字化转型的过程中&#xff0c;随着信息化程度的提高&#xff0c;越来越多的企业开始采用微服务架构来构建自己的业务系统,各种系统之间的集成、数据共享…
阅读更多...
k8s上对Pod的管理部分详解

k8s上对Pod的管理部分详解

目录 一.Pod结构介绍 1.user container 2.pause 二.Pod工作形式介绍 1.自主式pod 2.控制器管理下的pod 三.对Pod的操作介绍 1.run/apply -f/create -f运行pod 2.get查看pod信息 3.exec操作运行中的pod &#xff08;1&#xff09;进入运行中的pod &#xff08;2&…
阅读更多...
Linux RPM包安装、卸载和升级

Linux RPM包安装、卸载和升级

我们以安装 apache 程序为例。因为后续章节还会介绍使用源码包的方式安装 apache 程序&#xff0c;读者可以直观地感受到源码包和 RPM 包的区别。 RPM包默认安装路径 通常情况下&#xff0c;RPM 包采用系统默认的安装路径&#xff0c;所有安装文件会按照类别分散安装到表 1 所…
阅读更多...
阿里云付费用户破100万 用户规模亚洲最大

阿里云付费用户破100万 用户规模亚洲最大

导读阿里巴巴集团公布2018财年第一季度财报&#xff0c;阿里云达到一个重要里程碑&#xff0c;云计算付费用户数量首次超过100万&#xff0c;成为亚洲首家达到百万级用户规模的云计算公司。同时&#xff0c;企业级市场被云计算人工智能等新技术全面激活&#xff0c;推动该季度营…
阅读更多...
Stable Diffusion：最先进的文本生成图像模型

Stable Diffusion：最先进的文本生成图像模型

稳定扩散 生成式 AI 技术正在迅速发展&#xff0c;现在可以简单地根据文本输入生成文本和图像。Stable Diffusion 是一种文本到图像模型&#xff0c;使您能够创建逼真的应用程序。 扩散模型通过学习去除添加到真实图像中的噪声进行训练。这种降噪过程会产生逼真的图像。这些模…
阅读更多...
【研究】Splunk 字段是否被加工过

【研究】Splunk 字段是否被加工过

1: 背景： 最近用户有个疑问，就是有些字段的输出有点问题，不确定是否被加工过。 2: 查找问题： index=abc sourcetype=def123 发现字段： city_shanghai 的输出可能有点问题。 3: 排查问题： 先去这个splunk search head cluster 的页面： server 的查找如下： 登入so1 s…
阅读更多...
【Linux系统概念】

【Linux系统概念】

Linux系统概念 1 用户1.1 su和sudo1.1.1 /etc/sudoers 1.21.3 2345 1 用户 1.1 su和sudo 为什么会有su和sudo命令&#xff1f; 在实际工作当中需要在Linux不同用户之间进行切换。 root用户权限最高很多时候需要root用户才能执行一些关键命令。所以需要临时切换为root用户。工…
阅读更多...
【C++】智能指针（一）

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

这篇文章介绍下C的智能指针&#xff0c;当然&#xff0c;可能没有你想的那么智能。 为什么需要智能指针1 void remodel(string& str) {string* ps new string(str);str *ps;return; }这里不讨论这个函数有没有意义&#xff0c;在这段代码中&#xff0c;很明显&#xff…
阅读更多...
数据分析实战 | SVM算法——病例自动诊断分析

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

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

Copyright @ 2022~2023