Vue中的常用指令

 Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊标签属性。

为啥要学：提高程序员操作 DOM 的效率。

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

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

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

内容渲染指令 v-html v-text

内容渲染指令用来辅助开发者渲染 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 标签原有内容
    • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：

 
  <div id="app">
    <h2>个人信息</h2>
	// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">简介：</p>
  </div> 
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'张三',
                intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
            }
        })
</script>

运行结果如下： 

v-text和v-html一个很重要的区别是：v-text只是将值渲染出来，而v-html可以HTML标签的样式呈现出来。

修改上面代码的uname值：

data: {
          uname: "<h2>这是一个<strong>非常优秀</strong>的boy<h2>",
          intro: "<h2>这是一个<strong>非常优秀</strong>的boy<h2>",
        }

运行结果如下：

条件渲染指令 v-show v-if

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

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

     2. v-if

  • 作用：  控制元素显示隐藏（条件渲染）
  • 语法：  v-if= "表达式"          表达式值 true显示， false 隐藏
  • 原理：  基于条件判断，是否创建 或 移除元素节点
  • 场景：  要么显示，要么隐藏，不频繁切换的场景
  <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>

 flag为false，所以两个盒子都是隐藏的，我们按F12看一下现在的代码结构，如下：

我们可以发现，v-show是控制display:none来隐藏盒子的，而v_if控制的盒子没有在html结构中，因为 v-if是通过移除元素节点来隐藏盒子的

v-else 和 v-else-if

v-else 和 v-else-if

  • 作用：辅助v-if进行判断渲染
  • 语法：v-else  v-else-if="表达式"
  • 需要紧接着v-if使用
  <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>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

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

结果如下：

 事件绑定指令 v-on

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

  • <button v-on:事件名="内联语句">按钮
  • <button v-on:事件名="处理函数">按钮
  • <button v-on:事件名="处理函数(实参)">按钮
  • v-on: 简写为 @

1、内联语句

<div id="app">
    <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: 100
      }
    })
  </script>

2、事件处理函数

注意：

  • 事件处理函数应该写到一个跟data同级的配置项（methods）中
  • methods中的函数内部的this都指向Vue实例
<div id="app">
    <button>切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>

 

3、给事件处理函数传参

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

 属性绑定指令 v-bind

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

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

则可以这样设置属性值：

  • <img v-bind:src="url" />
  • <img :src="url" />   （v-bind可以省略）
  <div id="app">
    <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>

 列表渲染指令 v-for

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

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

  • item 是数组中的每一项
  • index 是每一项的索引，不需要可以省略
  • arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

 遍历数组，根据data中提供的booksList渲染：

<!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 booksList">
          <span>{{item.name}}</span>
          <span>{{item.author}}</span>
          <button>删除</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: "罗贯中" },
          ],
        },
      });
    </script>
  </body>
</html>

v-for中的key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

代码：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

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

双向绑定指令 v-model

所谓双向绑定就是：

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

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

语法：v-model="变量"

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

  1. 点击登录按钮获取表单中的内容
  2. 点击重置按钮清空表单中的内容

 

<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>

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

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

相关文章

【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏2（附项目源码）

【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏2（附项目源码）

本节最终效果演示 文章目录 本节最终效果演示系列目录前言添加小动物模型动画动物AI脚本效果 添加石头石头模型拾取物品效果 源码完结 系列目录 【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏1&#xff08;附项目源码&#xff09; 【制作100个unity游戏之23】…
阅读更多...
Mac Idea安装后无法启动

Mac Idea安装后无法启动

1、起因 想安装一个新版的idea2023.3.2&#xff0c;结果安装完之后直接无法启动 以为是卸载不干净&#xff0c;下载了一个腾讯柠檬&#xff0c;结果将2018版也一并卸载了 好家伙&#xff0c;彻底没得用 2、找原因 1&#xff09;查看idea报错信息 网上找了一圈&#xff0c;其…
阅读更多...
burp靶场--host攻击

burp靶场--host攻击

burp靶场–host攻击 https://portswigger.net/web-security/host-header#what-is-an-http-host-header-attack 在本节中&#xff0c;我们将讨论错误配置和有缺陷的业务逻辑如何通过 HTTP 主机标头使网站遭受各种攻击。我们将概述用于识别易受 HTTP 主机标头攻击的网站的高级方…
阅读更多...
RabbitMQ中交换机的应用及原理，案例的实现

RabbitMQ中交换机的应用及原理，案例的实现

目录 一、介绍 1. 概述 2. 作用及优势 3. 工作原理 二、交换机Exchange 1. Direct 2. Topic 3. Fanout 三、代码案例 消费者代码 1. 直连direct 生产者代码 测试 2. 主题topic 生产者代码 测试 3. 扇形fanout 生产者代码 测试 每篇一获 一、介绍 1. …
阅读更多...
告别无法访问的Github

告别无法访问的Github

告别无法访问的Github 最近在使用github的时候又登不上去了&#xff0c;挂着VPN都没用 但是自己很多项目都存在github&#xff0c;登不上去那不得损失很大 所以一行必须整点儿特殊手段来访问&#xff0c;顺便分享一下 1.加速器 网上很多解决方案都是在分享各种加速器来登陆…
阅读更多...
深入理解JS语法与变量

深入理解JS语法与变量

深入理解JS语法与变量 前言初识JavaScriptJavaScript的语言风格和特性 JavaScript的书写位置认识输出语句学会处理报错REPL 环境 变量定义变量改变变量变量的合法命名变量的默认值变量的常见错误等号表示赋值同时声明多个变量 变量声明提升注意事项 结语 前言 在现代Web开发中…
阅读更多...
idea中debug Go程序报错error layer=debugger could not patch runtime.mallogc

idea中debug Go程序报错error layer=debugger could not patch runtime.mallogc

一、问题场景 在idea中配置了Go编程环境&#xff0c;可以运行Go程序&#xff0c;但是无法debug&#xff0c;报错error layerdebugger could not patch runtime.mallogc: no type entry found, use ‘types’ for a list of valid types 二、解决方案 这是由于idea中使用的d…
阅读更多...
物流实时数仓——概述与准备工作

物流实时数仓——概述与准备工作

目录 一、架构设计与技术栈 (一)数仓架构设计 (二)所用技术栈 (三)最终效果 二、关于离线与实时的相关概念 三、实时数仓设计思路 一、架构设计与技术栈 (一)数仓架构设计 (二)所用技术栈 Hadoop 3.3.4 Zookeeper 3.7.1 Kafka 3.3.1 Hbase 2.4.11 Redis 6.0.8 Flink 1.17…
阅读更多...
HCIP-BGP实验4

HCIP-BGP实验4

搭建实验拓扑图 要求 1.全网可达 2.isp只能配置IP地址 实验开始 配置IP地址及环回 r1,r2,r9,r10配ipv4地址(以r1为例) [Huawei]sysname r1 [r1]interface g0/0/0 [r1-GigabitEthernet0/0/0]ip address 12.1.1.1 24 [r1-GigabitEthernet0/0/0]q [r1]interface LoopBack 0…
阅读更多...
全双工通信协议：WebSocket

全双工通信协议：WebSocket

全双工通信协议&#xff1a;WebSockets 前言何时使用WebSocketsWebSocket APITextWebSocketHandlerWebSocketConfigurerWebSocket握手配置服务器允许的来源心跳包Java WebSocket API案例一&#xff1a;前端发送消息并接收后端响应案例二&#xff1a;模拟后端向前端推送消息案例…
阅读更多...
实战：加密传输数据解密

实战：加密传输数据解密

前言 下面将分享一些实际的渗透测试经验&#xff0c;帮助你应对在测试中遇到的数据包内容加密的情况。我们将以实战为主&#xff0c;技巧为辅&#xff0c;进入逆向的大门。 技巧 开局先讲一下技巧&#xff0c;掌握好了技巧&#xff0c;方便逆向的时候可以更加快速的找到关键…
阅读更多...
元数据管理在数据仓库中的实践应用

元数据管理在数据仓库中的实践应用

一、什么是数据仓库的元数据管理？ 1、什么是元数据？ 元数据（Metadata），又称中介数据、中继数据，为描述数据的数据（data about data）。 抽象的描述：一组用于描述数据的数据组，该数据组的一切信息都描述了该数据的某方面特征，则该数据组即可被称为元数据。 举几个…
阅读更多...
【Android 10】 BatteryController

【Android 10】 BatteryController

学习了一下电池的相关模式&#xff0c;也就是它的观察者模式&#xff0c;先附上图 图应该挺清晰的&#xff0c;BatteryControllerImpl就是被观察者&#xff0c;BatteryControllerImpl重写了CallbackController的两个方法用于添加或移除观察者。 void addCallback(T listener);…
阅读更多...
【vueCms】vuecms_xg安装与使用视频讲解【视频讲解】

【vueCms】vuecms_xg安装与使用视频讲解【视频讲解】

克隆项目 gitee项目地址:https://gitee.com/derekgo/vue-cms_xg git clone gitgitee.com:derekgo/vue-cms_xg.git开启自动化脚本 点击后&#xff0c;运行http://localhost:3002 本地配置 开启本地redis 开启redis redis-server.exe redis.windows.conf重启redis 注意:…
阅读更多...
系统性学习vue-vue-router

系统性学习vue-vue-router

vue-router 路由的简介SPA路由 路由的基本使用安装引入使用标签式编程式 注意 嵌套(多级)路由路由传参query参数params参数 命名路由路由的props配置router-link的replace属性编程式路由导航路由跳转后退和前进 缓存路由组件两个新的生命周期钩子函数路由守卫全局前置守卫全局后…
阅读更多...
Python中的os模块

Python中的os模块

目录 1、获取当前路径 2、获取父级路径 3、更改路径 4、罗列当前路径下方所有内容 5、创建文件夹 6、创建多级文件夹 7、删除文件夹 8、删除文件 9、重命名文件 10、walk 11、path os 是 Python的内置模块之一&#xff0c;提供了与操作系统交互的功能。它可以用于执…
阅读更多...
Vue3 ref与reactive

Vue3 ref与reactive

✨ 专栏介绍 在当今Web开发领域中&#xff0c;构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架&#xff0c;正是为了满足这些需求而诞生。它采用了MVVM架构模式&#xff0c;并通过数据驱动和组件化的方式&#xff0c;使…
阅读更多...
深度学习技巧应用33-零门槛实现模型在多个GPU的分布式流水线训练的应用技巧

深度学习技巧应用33-零门槛实现模型在多个GPU的分布式流水线训练的应用技巧

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下深度学习技巧应用33零门槛实现模型在多个GPU的分布式流水线训练的应用技巧&#xff0c;本文将帮助大家零门槛的实现模型在多个GPU的并行训练&#xff0c;如果你手头上没有GPU资源&#xff0c;根据本文的介绍也可实现…
阅读更多...
如何测试python 版本与 torch 、 torchvision 版本是否对应？

如何测试python 版本与 torch 、 torchvision 版本是否对应？

python 版本与 torch 、 torchvision 版本的对应关系如下图所示&#xff1a; 打开 anaconda powershell prompt&#xff0c;输入如下命令&#xff1a; >python>>>import torch>>>c torch.ones((3,1)) //创建矩阵>>>c c.cuda(0) …
阅读更多...
备考 | 2024年NOC大赛 15套图形化编程、Python、C++初复决赛真题试卷

备考 | 2024年NOC大赛 15套图形化编程、Python、C++初复决赛真题试卷

为了让大家备考2024年NOC大赛&#xff0c;今天给大家分享全国中小学信息技术创新与实践大赛(NOC大赛&#xff09;2023年图形化编程Scratch小低组、小高组初赛复赛决赛6套真题试卷&#xff0c;Python编程小高组、初中组初赛复赛决赛6套真题试卷&#xff0c;C编程初中组初赛复赛决…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站