vue 语法2

【5】条件渲染和列表渲染

(1)条件渲染v-if v-else-if v-else

  • 条件渲染根据表达式的真假值来渲染不同的元素或组件。

    • v-if:当表达式的值为真时,渲染该元素或组件。

    • v-else-if:当前面的 v-ifv-else-if 的表达式为假时,会评估这个 v-else-if 的表达式,如果为真,则渲染该元素或组件。

    • v-else:当前面的 v-ifv-else-if 的表达式都为假时,渲染该元素或组件

image-20240425173903239

<body>
<div id="app"><h2>当前分数>>>:{{score}}</h2><h2 v-if="score>=90">文字描述>>>:优秀</h2><h2 v-else-if="score>=60&&score<90">文字描述>>>:及格</h2><h2 v-else>文字描述>>>:不及格</h2></div>
</body><script>var vm = new Vue({el: "#app",data: {score: 99},})
</script>

(2)列表渲染v-for

  • 列表渲染用于渲染一组元素或组件的指令。
    • 语法:v-for="(item, index) in items" :key="index"
      • items 是一个数组或对象。
      • item 是当前遍历到的元素或属性值。
      • index 是当前元素的索引(对于数组)或属性的键(对于对象)。
      • :key 是一个绑定,它提供了一个唯一的标识符给每个节点,这对于 Vue 的虚拟 DOM 算法来说是必要的,以便能够高效地更新和重新排序节点

image-20240425184303485

<body>
<div id="app"><h2>整型遍历--(item, index) in 3</h2><ul><li v-for="(item, index) in 3" :key="index">元素:{{item}}, 索引:{{index}}</li></ul><h2>字符串遍历--(item, index) in 'n b'</h2><ul><li v-for="(item, index) in 'n b'" :key="index">元素:{{item}}, 索引:{{index}}</li></ul><h2>数组遍历--(item, index) in infoArray</h2><ul><li v-for="(item, index) in infoArray" :key="index">元素:{{item}}, 索引:{{index}}</li></ul><h2>对象遍历--(item, index) in 'n b'</h2><ul><li v-for="(value, key, index) in infoObj" :key="index">元素:{{key}}:{{value}}, 索引:{{index}}</li></ul></div>
</body><script>var vm = new Vue({el: "#app",data: {infoArray: ["n", "b"],infoObj: {"name": "bruce", "age": 18}},})
</script>

【6】input标签事件处理

(1)数据双向绑定v-model

  • v-model 用于在 input、textarea 或 select 等表单元素上创建双向数据绑定。双向数据绑定意味着,当表单元素的值发生变化时,Vue 实例中的数据也会自动更新;反之,当 Vue 实例中的数据发生变化时,表单元素的值也会相应地更新。

  • <input type="text" :value="inputText">和<input type="text" v-model="inputText">的区别

    • :value="inputText"
      • 它用于单向地绑定数据到元素的 value 属性上。
      • inputText 的值发生变化时,<input> 元素的值会更新,但反过来则不然——即用户输入的值不会更新到 inputText
      • 这种方式是单向的
    • v-model="inputText"
      • 它不仅仅设置元素的 value 属性,还监听输入事件(如 inputchange)来更新数据。
      • 当用户在 <input> 元素中输入文本时,inputText 的值会自动更新,同时,如果 inputText 的值在程序的其他部分被改变,<input> 元素的内容也会更新。
      • 这种方式是双向的

image-20240425190102532

<body>
<div id="app"><h2>单向数据绑定":value="inputText"</h2><label>输入框:<input type="text" :value="inputText1"></label><p>输入框文本>>>:{{inputText}}</p><h2>双向数据绑定v-model="inputText"</h2><label>输入框:<input type="text" v-model="inputText2"></label><p>输入框文本>>>:{{inputText}}</p></div>
</body><script>var vm = new Vue({el: "#app",data: {inputText1: "",inputText2: ""},})
</script>

(2)input标签常用修饰符

  • .lazy

    • 使用 .lazy 修饰符后,v-model 会在 change 事件触发时才更新数据,这通常意味着用户完成输入并离开输入框(如点击输入框外部或按 Tab 键)时,数据才会更新
  • .number

    • 数字类型开头会保留,一单出现非数字,后面的字符不在管
    • 非数字开头,保留所有的字符
  • .trim

    • 自动去除用户输入值的前后空格

image-20240425191416057

<body>
<div id="app"><h2>v-model.lazy:完成输入并离开触发数据更新</h2><label>输入框:<input type="text" v-model.lazy="inputText1"></label><p>输入框文本>>>:{{inputText1}}</p><h2>v-model.number:数字开头匹配数字,非数字开头匹配所有</h2><label>输入框:<input type="text" v-model.number="inputText2"></label><p>输入框文本>>>:{{inputText2}}</p><h2>v-model.trim:去除输入框首位空格</h2><label>输入框:<input type="text" v-model.trim="inputText3"></label><p>输入框文本>>>:{{inputText3}}</p></div>
</body><script>var vm = new Vue({el: "#app",data: {inputText1: "",inputText2: "",inputText3: "",},})
</script>

(3)input常用事件处理

  • input:当输入框进行输入的时候触发的事件
  • change:当元素的值发生改变时触发的事件
    • 只有输入结束以后才会进行判断的是否改变
    • 如:输入123,确认以后,在删除23,在输入23是不会触发change事件的
  • blur:当输入框失去焦点的时候触发的事件
  • focus:当输入框获得焦点的时候触发的事件

image-20240425193206294

<body>
<div id="app"><h2>四个事件可以放在一起</h2><label>输入框:<input @input="inputFunc" @focus="focusFunc" @change="changeFunc" @blur="blurFunc" type="text"v-model="inputText"></label><p>输入框文本>>>:{{inputText}}</p></div>
</body><script>var vm = new Vue({el: "#app",data: {inputText: "",},methods: {inputFunc() {console.log('触发输入事件')},focusFunc() {console.log('触发获得焦点事件')},changeFunc() {console.log('触发输入改变事件')},blurFunc() {console.log('触发失去焦点事件事件')},}})
</script>

【7】过滤案例

(1)要求

  • 已知一个字符串数组
  • 当输入框输入文本内容时,显示含有文本内容的字符串
  • 当输入框删除部分内容时,显示内容会重新匹配显示匹配成功的字符串

(2)实现效果

  • 过滤函数

    • this.newInfoArray = this.infoArray.filter(function (item) {  if (item.indexOf(_inputText) >= 0) {  return true  } else {  return false  }  
      })
      
    • this.infoArray.filter(...):对 infoArray 调用 filter 方法。

    • function (item) {...}:这是传递给 filter 的回调函数,它接受数组中的一个元素 item 作为参数。

    • item.indexOf(_inputText) >= 0:检查 item 是否包含 _inputText。如果包含(即 indexOf 返回的值大于或等于 0),则返回 true,否则返回 false

    • return truereturn false:根据 indexOf 的结果,决定当前元素是否应该包含在新数组中。

  • 封装局部变量

    • var _inputText = this.inputText
      
    • filter 的回调函数中直接使用 this.inputText,那么 this 将不会指向 Vue 实例,从而导致错误。

    • 通过将 this.inputText 的值赋给一个局部变量,可以确保在回调函数中正确地使用它。

image-20240425200408230

<body>
<div id="app"><h2>过滤案例</h2><label>输入框:<input @input="inputFunc" type="text" v-model="inputText"></label><hr><h2>信息列表</h2><ul><li v-for="(item,index) in newInfoArray" :key='index'>第【{{index + 1}}】条数据>>:{{item}}</li></ul></div>
</body><script>var vm = new Vue({el: "#app",data: {inputText: "",infoArray: ["a", "ae", "eo", "aei", "ei", "aeiou"],newInfoArray: ["a", "ae", "eo", "aei", "ei", "aeiou"]},methods: {inputFunc() {// 函数又嵌套了一层,不能直接使用inputTextvar _inputText = this.inputTextthis.newInfoArray = this.infoArray.filter(function (item) {if (item.indexOf(_inputText) >= 0) {return true} else {return false}})}}})
</script>
  • 稍微优化一下:优化条件表达式

    • inputFunc() {var _inputText = this.inputTextthis.newInfoArray = this.infoArray.filter(function (item) {return (item.indexOf(_inputText)) >= 0})
      }
      
  • 再次优化:使用箭头函数

    • inputFunc() {this.newInfoArray = this.infoArray.filter((item) => item.indexOf(this.inputText) >= 0)
      }
      

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

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

相关文章

【机器视觉】C# .NET 8 部署yolov9 onnx对象检测

这段代码展示了一个使用YOLOv9进行对象检测的简单测试框架。代码主体以及其功能分为以下几个关键部分&#xff1a; 创建测试图片数组 _testImages&#xff0c;它包含了图片文件名和对应的标签。使用 buildTests 方法来从给定的文件名中加载图片并调整尺寸&#xff0c;准备测试数…

linux数据备份与恢复

目录 前言 1、数据备份和恢复中的两个关键性指标 2、linux系统的定时任务 1&#xff09;本地定时任务crontab 在实验测试过程中&#xff0c;遇到多次crontab任务不执行问题 &#xff0c;总结下来主要有几个方面原因&#xff1a; 2)分布式定时任务系统Jenkins 3、备份存储…

如何用二维码实现现代仓库管理?(附详细实现过程)

简道云团队曾参与过近300企业的仓库管理软件的部署&#xff0c;要想知道如何实现用二维码管理仓库&#xff0c;首先要对整体流程有清晰的框架&#xff01; 1、产品数据的录入2、设计电子库存卡3、库存盘点单4、库存盘点报表 总结一下就是——数卡单表&#xff0c;四步实现&…

【Go 数据结构】树与哈希表的具体实现

树 树是一种由 n 个有限节点组成的具有层次关系的集合。 树的定义&#xff1a; 节点之间有层次关系&#xff0c;分为父节点和子节点有唯一一个的根节点&#xff0c;该节点没有父节点除了根节点&#xff0c;每个节点有且只有一个父节点每一个节点本身以及它的后代也是一棵树&…

爬虫工具you-get

you-get是一个简单易上手的爬虫小工具&#xff0c;可以从网络中爬取多媒体信息&#xff0c;包括图片、音频和视频。you-get的github项目地址为&#xff1a;https://github.com/soimort/you-get 一、安装 以下为相关依赖&#xff0c;需要分别安装&#xff1a; Python 3 (必须…

补一 继承的使用

继承的关键词为extends 模型为 public class 子类 extends 父类

中国热门高端dating约会交友软件有哪些?国内权威Dating App红黑排行榜推荐

在dating 软件刷了无数个男人后终于脱单啦&#xff0c;跟大家分享一些我的个人感受 1、二狗 颜值⭐️⭐️⭐️ 真实性 ⭐️⭐️⭐️⭐️⭐️ 用户质量⭐️⭐️⭐️⭐️ ⭕️优点&#xff1a;整体用户质量较高&#xff0c;用户集中在金融、互联网和体制内行业。用户需进行学历、…

速来get!多微信聚合聊天功能大揭秘!

随着网络时代的发展&#xff0c;微信成为了职场中不可或缺的沟通工具&#xff0c;很多人都有着多个微信号&#xff0c;而要想高效管理这些账号&#xff0c;那就少不了工具的帮忙。 通过微信管理系统&#xff0c;可以轻松实现多个微信号聚合聊天&#xff0c;提高沟通效率。 1、…

rdflib triples 匹配始终为空的问题

写代码的时候遇到了一个问题&#xff0c;花了好长时间解决&#xff0c;记录一下&#xff0c;避免再出问题 完整代码如下所示&#xff1a; # 导入用于处理文件的标准库 import os from rdflib import Graph, URIRef # 指定要创建的TTL文件的名称 filename "example.ttl&q…

详细解读自动化测试

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 软件测试是软件开发过程中一个必不可少的环节。传统的软件测试方…

抓取Google时被屏蔽怎么办?如何避免?

在当今数字化时代&#xff0c;数据采集和网络爬取已成为许多企业和个人必不可少的业务活动。对于爬取搜索引擎数据&#xff0c;特别是Google&#xff0c;使用代理IP是常见的手段。然而&#xff0c;使用代理抓取Google并不是一件轻松的事情&#xff0c;有许多常见的误区可能会导…

顶顶通呼叫中心中间件电话黑名单系统介绍

黑名单 有显示成功和失败导入数&#xff0c;可以禁用也可以启用&#xff0c;如果禁用状态就是不使用这一组黑名单&#xff0c;多个号码核验就是验证号码存不存在。黑名单只有管理员和操作员可以配置&#xff0c;租户是看不到黑名单的。但是黑名单跟租户是互通的。 可以单个号码…

【智能算法应用】基于麻雀搜索算法的二维最大熵图像阈值分割

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.数学模型 最大熵法是由 Kapur 于 1985 年所提出的&#xff0c; 该方法的阈值选取标准取决于图像中最大化分 割的目标区域和背景区域…

leetcode 1 ~ 100

文章目录 1. 两数之和&#xff08;用哈希表减少查找的时间复杂度&#xff09;2. 两数相加&#xff08;高精度加法&#xff09;3.无重复字符的最长子串&#xff1a;&#xff08;模板&#xff1a;经典的滑动窗口算法&#xff09;5. 最长回文子串&#xff08;枚举&#xff09;6. Z…

STM32F1#1(入门了解)

一、STM32开发平台和工具 1.1 STM32芯片介绍 典型微控制器由CPU&#xff08;运算器、控制器&#xff09;、RAM、ROM和输入输出组成。 1.2 STM32核心板 STM32核心板配件&#xff1a; ①JTAG/SWD仿真-下载器 ②通信-下载模块 ③OLED显示屏 1&#xff09; 通信-下载模…

前端项目学习记录2:sass的使用

1.安装sass pnpm i sass2.配置vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue import path from "path"; //引入svg需要用到的插件 import { createSvgIconsPlugin } from vite-plugin-svg-icons export default defineConf…

spring的高阶使用技巧1——ApplicationListener注册监听器的使用

Spring中的监听器&#xff0c;高阶开发工作者应该都耳熟能详。在 Spring 框架中&#xff0c;这个接口允许开发者注册监听器来监听应用程序中发布的事件。Spring的事件处理机制提供了一种观察者模式的实现&#xff0c;允许应用程序组件之间进行松耦合的通信。 更详细的介绍和使…

英语笔记 1

Although the rich might look down upon the poor, it is important to remember that everyone deserves to be treated with respect.

中文文本特征提取之自动分词

关键词&#xff1a;在某一个类别的文章中&#xff0c;出现的次数很多&#xff0c;但是在其他类别的文章当中出现很少 from sklearn.feature_extraction.text import CountVectorizer import jiebadef chinese_text_extraction02():"""中文文本特征提取&#xf…