v-for

2024/4/11 23:04:54
vue v-for循环

vue v-for循环

基本数据类型&#xff1a;有两种循环方式如下&#xff1a; <p v-for"item in names" :key"item">{{item}}</p> <p v-for"(item,index) in names" :key"index">{{item}}</p> <script setup> import {r…
阅读更多...
在Vue开发中v-if指令和v-show指令的使用介绍，v-if和v-for的优先级以及使用注意事项的介绍

在Vue开发中v-if指令和v-show指令的使用介绍，v-if和v-for的优先级以及使用注意事项的介绍

文章目录 一、条件渲染1、v-if2、v-else3、v-else-if4、\<template> 上的 v-if5、v-show 二、区别&#xff1a;1、渲染区别2、性能区别&#xff1a; 三、v-if和v-for的优先级四、注意事项 一、条件渲染 1、v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令…
阅读更多...
v-if 和v-show 的区别

v-if 和v-show 的区别

第074个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使用&#xff0c;computed&a…
阅读更多...
Vue3基础之v-if条件与 v-for循环

Vue3基础之v-if条件与 v-for循环

条件渲染 v-if、v-else-if、v-else 基本使用 v-if 指令用于根据表达式的真假来条件性地渲染元素&#xff0c;而 v-else-if 和 v-else 则用于添加额外的条件分支。 <template><div><p v-if"type A">Type A</p><p v-else-if"type…
阅读更多...
29 Vue 中 v-if/show/for 的实现

29 Vue 中 v-if/show/for 的实现

前言 这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 主要记录的是 vue 的相关实现机制 呵呵 理解本文需要 vue 的使用基础, js 的使用基础 v-if 测试用例 测试用例如下, 主要是一个 if 的使用 这里我们仅仅跟进到…
阅读更多...
Vue修炼系列教程 - 筑基篇2

Vue修炼系列教程 - 筑基篇2

前言 回顾上一篇&#xff0c;我们讲了vue基本的响应式特征&#xff0c;以及 事件的绑定和vue自带指令v-if、v-show的使用&#xff0c;今天我们接下去修炼 打个广告&#xff0c;最底下的公众号&#xff0c;可以每天领外卖红包、打车优惠券&#xff0c;需要的可以关注一下哦 开…
阅读更多...
在组件上使用 v-for：利用 props 传递数据（父组件传入子组件）

在组件上使用 v-for：利用 props 传递数据（父组件传入子组件）

不使用组件的v-for 和 使用组件的 v-for 区别&#xff1a; 1. 可重复使用性&#xff1a; 组件是可以重复使用模板&#xff1b; 2. 触发事件的方法&#xff1a; 组件模板元素触发事件需要用 $emit&#xff0c;把自定义事件发射到html 层面上&#xff0c;html 再通过绑定自定义事…
阅读更多...
19.（vue3.x+vite）v-if和v-for哪个优先级更高

19.（vue3.x+vite）v-if和v-for哪个优先级更高

前端技术社区总目录（订阅之前请先查看该博客） v-if和v-for哪个优先级更高 （1）实践中不应该把v-for和v-if放一起，可以包一层template （2）在vue2中，v-for的优先级是高于v-if （3）在vue3中，v-for的优先级是低于v-if 组件代码 <template><div><!--包一…
阅读更多...
vue渲染列表时报错 [Vue warn]: Avoid using non-primitive value as key, use string/number

vue渲染列表时报错 [Vue warn]: Avoid using non-primitive value as key, use string/number

进入页面报错&#xff0c;如下&#xff1a; 原代码&#xff0c;如下&#xff1a; <li v-for"item in this.new_list[0]" :key"item"><el-container><el-header><div class"title">{{item.title}}</div></el-…
阅读更多...
Vue基础入门小demo——记事本

Vue基础入门小demo——记事本

文章目录 &#x1f4cb;前言 &#x1f3af;demo介绍 &#x1f3af;完整代码 &#x1f3af;最终效果 &#x1f3af;案例分析 &#x1f4cb;前言 记事本&#xff08;不是操作系统的那个记事本&#xff0c;是一个简单的网页版本记事本&#xff09;是一个较全面的Vue指令集合案…
阅读更多...
vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

文章目录一、v-for二、key 属性&#xff08;非常重要&#xff09;举例&#xff1a;三、取值范围四、列表过滤举例&#xff1a;针对li标签内容进行过滤&#xff0c;根据用户输入筛选内容&#xff0c;要求使用computed和watch两种方式实现五、列表排序六、Vue监测“对象”数据改变…
阅读更多...
当 el-upload 遇上 v-for 时应该注意的问题

当 el-upload 遇上 v-for 时应该注意的问题

虽然 element-ui 现在几乎不更新了, 但不能否认它的优秀 而今天要讲的就是这个优秀的框架中优秀的组件 el-upload 有过 element-ui 使用经验的小伙伴大概都用过它的上传组件(el-upload) 单独使用 el-upload 的文档已经很全面, 操作起来也很好用, 没毛病 但当 el-upload 遇上 …
阅读更多...

Copyright @ 2022~2023