vue - 指令（一）

看文章可以得到什么？

1.可以快速的了解并会使用vue的指令

2.可以加深你对vue指令的理解，知道每个指令代表什么功能​​​​​​​

目录

什么是vue的指令？​​​​​​​

vue常见指令的使用  

v-html

v-show 

v-if 

v-else 和v-else-if

v-on 

v-bind 

 v-for

v-model 

案例-小黑记事本 

  • 什么是vue的指令？

指令：带有 v- 前缀 的 特殊 标签属性

vue这个框架自己规定的特殊的规范，类似于html中的自己定义p等标签

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

  • vue常见指令的使用  

v-html

作用：设置元素的 innerHTML

语法：v-html = "表达式 "

v-show 

1. 作用： 控制元素显示隐藏

2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏

3. 原理： 切换 display:none 控制

4. 场景： 频繁切换显示隐藏的场景

v-if 

1. 作用： 控制元素显示隐藏（条件渲染）

2. 语法： v-if = "表达式" 表达式值 true 显示，false 隐藏

3. 原理： 基于条件判断，是否 创建 或 移除 元素节点

4. 场景： 要么显示，要么隐藏，不频繁切换的场景

v-else 和v-else-if

1. 作用： 辅助 v-if 进行判断渲染

2. 语法： v-else v-else-if = "表达式

3. 注意： 需要紧挨着 v-if 一起使用

v-on 

1. 作用： 注册事件= 添加监听 + 提供处理逻辑

2. 语法：

① v-on:事件名 = "内联语句"

② v-on:事件名 = "methods中的函数名

3. 简写：@事件名

4. 注意：methods函数内的 this 指向 Vue 实例

v-on 调用传参 

v-bind 

1. 作用： 动态的设置html的标签属性
2. 语法： v-bind:属性名="表达式"
3. 注意：

简写形式 :属性名="表达式"

小案例案例：波仔的学习之旅

需求：点击按钮，切换图片

 v-for

1. 作用： 基于数据循环， 多次渲染整个元素 → 数组、对象、数字

2. 遍历数组语法：

v-for = "(item, index) in 数组"

  • item 每一项， index 下标
  • 省略 index: v-for = "item in 数组"

  • v-for 中的 key

语法：key属性 = "唯一标识"

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

注意：

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

如果这个属性不添加，那么在对数组进行操作的时候后重新渲染的数据会出现问题

例子：假设我们要删除下图中那个带颜色的那个li，如果不添加 ：key="" 这个属性，那么就会出现内容被删除了，但样式还在的情况

不加 :key属性的情况：

 加了 :key的属性的情况

v-model 

1. 作用: 给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容

  • ① 数据变化 → 视图自动更新
  • ② 视图变化 → 数据自动更新

2. 语法: v-model = '变量'

案例-小黑记事本 

① 列表渲染

② 删除功能

③ 添加功能

④ 底部统计 和 清空

<!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" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body><!-- 主体区域 -->
<section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input placeholder="请输入任务" class="new-todo" v-model="todo" /><button class="add" v-on:click="add">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in todoList" ><div class="view"><span class="index">{{index+1}}.</span> <label>{{item}}</label><button class="destroy" @click="del(index)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer" v-show="todoList.length>0"><!-- 统计 --><span class="todo-count">合 计:<strong> {{todoList.length}} </strong></span><!-- 清空 --><button class="clear-completed" @click="delAll">清空任务</button></footer>
</section><!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {todoList: [],todo: ''},methods:{add(){console.log(this.todo);this.todoList.push(this.todo)console.log(this.todoList);//加入本地存储localStorage.setItem('todoList',JSON.stringify(this.todoList))this.todo = ''},delAll(){console.log('清空');this.todoList = []},render(){//读取本地数据this.todoList = JSON.parse(getItem('todoList'))},del(index){// console.log(index);// 删除指定数组元素this.todoList.splice(index,1)}}})</script>
</body>
</html>

 功能总结：

① 列表渲染：
v-for key 的设置 {{ }} 插值表达式
② 删除功能
v-on 调用传参 filter 过滤 覆盖修改原数组
③ 添加功能
v-model 绑定 unshift 修改原数组添加
④ 底部统计 和 清空
数组.length累计长度
覆盖数组清空列表
v-show 控制隐

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

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

相关文章

java多线程实现（二）Java并发容器和框架

java多线程实现（二）Java并发容器和框架

一、CouncurrentHashMap 二、ConcurrentLinkedQueue 三、java中的阻塞队列 jdk7提供了7个阻塞队列 四、Fork / Join框架
阅读更多...
SpringBoot日志插件log4J和slf4J的使用和比较含完整示例

SpringBoot日志插件log4J和slf4J的使用和比较含完整示例

点击下载《SpringBoot日志插件log4J和slf4J的使用和比较含完整示例》 1. 前言 本文主要介绍了在 Spring Boot 框架中如何使用 Log4j 和 Slf4j&#xff0c;并通过对比分析它们的优缺点&#xff0c;帮助读者更好地选择合适的日志记录工具。文章中提供了完整的示例代码&#xff…
阅读更多...
Spring Data Envers 数据审计实战

Spring Data Envers 数据审计实战

随着各行各业信息化发展&#xff0c;决策者们越来越意识到数据版本追踪的重要性&#xff0c;尤其是上市公司&#xff0c;数据对于他们尤为重要。考虑到研发成本&#xff0c;对重要表单数据支持页面级的修改历史查看、对所有业务数据支持DB级的版本查看是一个不错的选择。 对于…
阅读更多...
有奖调查 | @所有人，MatrixOne 有一份问卷邀您填写~

有奖调查 | @所有人，MatrixOne 有一份问卷邀您填写~

MO社区系统调查问卷 活动时间&#xff1a;即日起至2月17日 前言 PREFACE 在“信创”国产化操作系统的号召下&#xff0c;随着 CentOS 7 的维护周期接近尾声&#xff0c;社区很多小伙伴都在积极调研新的操作系统进行测试和更换。为最大程度的保障 MatrixOne 在社区使用场景下…
阅读更多...
设计模式学习笔记(一):基本概念；UML

设计模式学习笔记(一):基本概念；UML

文章目录 参考面向对象的设计原则创建型模式结构型模式行为型模式 UML视图图&#xff08;Diagram&#xff09;模型元素(Model Element)通用机制类之间的关系关联关系复杂&#xff01;&#xff01;聚合关系组合关系 依赖关系泛化关系接口与实现关系 参考 https://github.com/fa…
阅读更多...
2.0 Zookeeper 安装配置

2.0 Zookeeper 安装配置

Linux 安装 zookeeper 下载地址为: Apache ZooKeeper。 选择一稳定版本&#xff0c;本教程使用的 release 版本为3.4.14&#xff0c;下载并安装。 打开网址 https://www.apache.org/dyn/closer.lua/zookeeper/zookeeper-3.4.14/zookeeper-3.4.14.tar.gz&#xff0c;看到如下界…
阅读更多...
c#cad 创建-圆（二）

c#cad 创建-圆（二）

运行环境 vs2022 c# cad2016 调试成功 一、代码说明 这段代码是一个AutoCAD插件&#xff0c;用于在模型空间中创建一个圆形。 首先&#xff0c;我们需要定义一个命令类CreateCircleCommand&#xff0c;并在命名空间CreateCircleInCad中声明。 在CreateCircleCommand类中&a…
阅读更多...
h5页面内嵌到app,解决ios无法使用左右侧滑返回上一页

h5页面内嵌到app,解决ios无法使用左右侧滑返回上一页

背景&#xff1a;vuevant组合开发的h5页面&#xff0c;嵌入多个app,其中安卓手机都可实现侧滑返回上一页&#xff0c;而苹果端不行&#xff0c;app本身不展示title顶部的返回箭头。 解决办法&#xff1a;判断机型&#xff0c;处理ios端监听左右滑动事件&#xff0c;结合transit…
阅读更多...
Java中的深拷贝和浅拷贝

Java中的深拷贝和浅拷贝

在 Java 中&#xff0c;深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;是两种不同的对象复制方式&#xff0c;它们在处理对象复制时的行为有所不同。 一、定义 浅拷贝&#xff08;Shallow Copy&#xff09; 浅拷贝是指创建一个新对象…
阅读更多...
【技能树学习】Git入门——练习题解析

【技能树学习】Git入门——练习题解析

前言 本篇文章给出了Git入门技能树中部分的练习题解析&#xff0c;包括分支管理&#xff0c;Git标签&#xff0c;在Mac和Windows上使用GitVSCode的步骤。强调了git cherry-pick不直接支持从标签中选择提交&#xff0c;git tag -d只能删除本地标签&#xff0c;Mac系统的终端可以…
阅读更多...
23、数据结构/查找相关练习20240205

23、数据结构/查找相关练习20240205

一、请编程实现哈希表的创建存储数组{12,24,234,234,23,234,23},输入key查找的值&#xff0c;实现查找功能。 代码&#xff1a; #include<stdlib.h> #include<string.h> #include<stdio.h> #include<math.h> typedef struct Node {int data;struct n…
阅读更多...
flutter使用webview_flutter在安卓和ios上打开网页

flutter使用webview_flutter在安卓和ios上打开网页

webview_flutter仓库地址&#xff1a;webview_flutter | Flutter package github地址&#xff1a;https://github.com/flutter/packages/tree/main/packages/webview_flutter/webview_flutter 要打开非https协议的网页&#xff0c;需要在安卓平台上添加权限&#xff1a;andro…
阅读更多...
C++ [NOIP2007 提高组] 矩阵取数游戏

C++ [NOIP2007 提高组] 矩阵取数游戏

有一个n行m列的矩阵&#xff0c;每个格子中有一个正整数。现在要从左上角的格子(1, 1)出发&#xff0c;每次只能向下或向右走一格&#xff0c;最后到达右下角的格子(n, m)。在走过的格子中取数&#xff0c;求取得的数的和的最大值。 输入&#xff1a; 第一行包含两个整数n和m&a…
阅读更多...
若依整合mybatis-plus

若依整合mybatis-plus

文章目录 1.注释掉原本的MybatisConfig2. 将mybatis的配置文件改为mybatis-plus文件 ##前言 出先下列异常&#xff1a; 请求地址’/prod-api/user’,发生未知异常. org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.ruoyi.web.mapper.Us…
阅读更多...
HP数组面试题

HP数组面试题

PHP数组面试题 问题&#xff1a; 如何创建一个空数组和一个带有初始值的数组&#xff1f; 答案&#xff1a; 创建空数组&#xff1a;可以使用array()函数或空数组语法[]来创建一个空数组&#xff0c;例如$arr array();或$arr [];。创建带有初始值的数组&#xff1a;可以在创建…
阅读更多...
C# BackgroundWorker的使用

C# BackgroundWorker的使用

C# 中的 BackgroundWorker 类是 .NET Framework 提供的一个组件&#xff0c;用于在后台线程上异步执行长时间运行的操作&#xff0c;同时保持与用户界面&#xff08;UI&#xff09;的交互&#xff0c;如更新进度信息或处理取消请求。这使得可以轻松地在不冻结UI的情况下执行耗时…
阅读更多...
003集—三调数据库添加三大类字段——arcgis

003集—三调数据库添加三大类字段——arcgis

在国土管理日常统计工作中经常需要用到三大类数据&#xff08;农用地、建设用地、未利用地&#xff09;&#xff0c;而三调数据库中无三大类字段&#xff0c;因此需要手工录入三大类字段&#xff0c;并根据二级地类代码录入相关三大类名称。本代码可一键录入海量三大类名称统计…
阅读更多...
什么是Java中的垃圾回收器，你能解释一下不同种类的垃圾回收算法吗？

什么是Java中的垃圾回收器，你能解释一下不同种类的垃圾回收算法吗？

什么是Java中的垃圾回收器&#xff0c;你能解释一下不同种类的垃圾回收算法吗&#xff1f; 在Java中&#xff0c;垃圾回收器是一种负责自动管理内存的机制&#xff0c;它负责检测和回收不再使用的对象&#xff0c;释放它们占用的内存空间。垃圾回收器的存在大大简化了程序员对…
阅读更多...
数字图像处理（实践篇）四十五 OpenCV-Python 使用ORB算法(包括算法概述)检测图像上的特征点

数字图像处理（实践篇）四十五 OpenCV-Python 使用ORB算法(包括算法概述)检测图像上的特征点

目录 一 ORB算法 二 涉及的函数 三 实践 ORB: An efficient alternative to SIFT or SURF SIFT 和 SURF 已获得专利，使用需要付费。但是ORB并不需要。ORB 最重要的一点是它来自“
阅读更多...
学习总结13

学习总结13

# 最大正方形 ## 题目描述 在一个 n* m 的只包含 0 和 1 的矩阵里找出一个不包含 0 的最大正方形&#xff0c;输出边长。 ## 输入格式 输入文件第一行为两个整数 n,m(1< n,m< 100)&#xff0c;接下来 n 行&#xff0c;每行 m 个数字&#xff0c;用空格隔开&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023