Vue中class与style绑定以及条件与列表渲染的分析

不言

发布时间：2018-07-17 16:41:37

2976人浏览过

来源于php中文网

原创

本篇文章给大家分享了关于vue中class与style绑定以及条件与列表渲染的分析，有需要的朋友可以参考一下

目标：

熟练使用class与style绑定的多种方式
熟悉v-if与v-for的用法，以及v-if和v-for一起使用的注意事项

class与style绑定的多种方式

绑定class和style都是使用v-bind也就是:

立即学习“前端免费学习笔记（深入）”；
无论是绑定class还是style,都有两种方式,一种是对象,一种是数组.
class和:class是共存的

绑定示例

1.class对象绑定

2.class数组绑定

3.style对象绑定

4.style数组绑定

v-if与v-for的用法

条件渲染

1.v-if="表达式", 表达式的真假值决定了是否挂载到页面上

这一段会在html里面,而且会显示出来

这段不会在html里面,也不会显示出来

2.v-show="表达式", 表达式的真假值决定了该节点的display属性是none / block

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

下载

display: block,会显示出来

display: none,不会显示出来

3.区别: 功能都是一样,实现节点是否显示出来,但是v-if会操作dom,会重新渲染页面

4.v-if的话,还有v-if-else和v-else这两个命令, 不过要连着一起用,中间不能有其他东西隔开,使用规则和js的if..else语句一样

列表渲染

1.v-for of

     {{item}}   //其中list为数组,item为数组元素
     {{index}}{{item}}
  //其中list为数组,index为索引(第一个0开始),item为数组元素

2.循环渲染对象

     //其中userInfo为对象, item为值, key为键, index为索引
     {{item}}{{key}}{{index}}

3.一般会加个key值,避免互相影响(语法检测会检测这个,添加key值之后就会互相区分独立,相同部分也会重新渲染,不会复用)

或

4.key和index是可选的

v-if和v-for一起使用的注意事项

1.v-for的优先级比v-if更高, 如果它们处于同一个节点,这样v-if将分别重复运行于每个v-for循环中.
也就是, 先执行v-for,v-for出来的每一项都会执行一次v-if.


  {{ todo }}

2.如果想先执行v-if再判断是否执行v-for, 可以将v-if置于外层元素(或template)上.


  
    {{ todo }}
  

No todos left!

相关标签:

if for 循环 class JS 对象 dom display

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：对Vue的模板语法,计算属性,侦听器的分析下一篇：对Vue中事件处理的分析

作者最新文章

如何在两个内联元素之间添加换行符

2019-04-15 14:06

ps反向选区快捷键是什么？

2019-04-15 15:37

编程适合什么人学？

2019-04-15 16:23

PS标尺怎么用？

2019-04-15 16:46

ctrl+t是什么快捷键？

2019-04-16 10:06

ctrl加什么是保存？

2019-04-16 10:43

it是什么职业？

2019-04-16 11:48

剪切快捷键ctrl加什么？

2019-04-16 14:02

查找的快捷键是ctrl键加上什么键

2019-04-16 14:55

编程是什么？

2019-04-16 16:04

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词，用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章，供大家免费阅读。

787

2023.08.22

class在c语言中的意思

在C语言中，"class" 是一个关键字，用于定义一个类。想了解更多class的相关内容，可以阅读本专题下面的文章。

490

2024.01.03

python中class的含义

本专题整合了python中class的相关内容，阅读专题下面的文章了解更多详细内容。

2025.12.06

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

516

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

266

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

361

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5402

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

483

2023.09.01

AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own（AO3）官网入口展开，系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法，并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程，帮助用户稳定访问 AO3 官网，高效完成中文阅读与作品浏览。

2026.02.02

热门下载

网站特效

网站源码

网站素材

前端模板