Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染
Class与style绑定、条件渲染和列表渲染
目标:
- 熟练使用class与style绑定的多种方式
- 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项
class与style绑定的多种方式
- 绑定class和style都是使用v-bind也就是:
- 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组.
- class和:class是共存的
绑定示例
1.class对象绑定
<!-- 根据isActivity的真假,判断是否应用activity这个class -->
<div :class="{activity:isActivity}"></div>
2.class数组绑定
<!-- 应用数组里面的class -->
<div :class="[activity, activityOne]"></div>
3.style对象绑定
<!-- 应用这个样式对象的样式 -->
<div :style="styleObj"></div>
<script>
...
//styleObj写在data里面
data() {
return {
styleObj: {
color: 'black'
}
}
}
...
</script>
4.style数组绑定
<!-- 应用这个数组里面的样式 -->
<div :style="[styleObj,{fontSize:'25px'}]"></div>
v-if与v-for的用法
条件渲染
1.v-if="表达式", 表达式的真假值决定了是否挂载到页面上
<div v-if="isTrue">这一段会在html里面,而且会显示出来</div>
<div v-if="isFalse">这段不会在html里面,也不会显示出来</div>
2.v-show="表达式", 表达式的真假值决定了该节点的display属性是none / block
<div v-show="isTrue">display: block,会显示出来</div>
<div v-show="isFalse">display: none,不会显示出来</div>
3.区别: 功能都是一样,实现节点是否显示出来,但是v-if会操作dom,会重新渲染页面
4.v-if的话,还有v-if-else和v-else这两个命令, 不过要连着一起用,中间不能有其他东西隔开,使用规则和js的if..else语句一样
列表渲染
1.v-for of
<li v-for="item of list">{{item}}</li> //其中list为数组,item为数组元素
<li v-for="(item,index) of list">{{index}}{{item}}</li> //其中list为数组,index为索引(第一个0开始),item为数组元素
2.循环渲染对象
//其中userInfo为对象, item为值, key为键, index为索引
<li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>
3.一般会加个key值,避免互相影响(语法检测会检测这个,添加key值之后就会互相区分独立,相同部分也会重新渲染,不会复用)
<li v-for="(item, index) of list" :key="index"></li>
或<li v-for="(item, index) of list" :key="item.id"></li>
4.key和index是可选的
v-if和v-for一起使用的注意事项
1.v-for的优先级比v-if更高, 如果它们处于同一个节点,这样v-if将分别重复运行于每个v-for循环中.
也就是, 先执行v-for,v-for出来的每一项都会执行一次v-if.
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
2.如果想先执行v-if再判断是否执行v-for, 可以将v-if置于外层元素(或template)上.
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染的更多相关文章
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- Vue学习计划基础笔记(六) - 组件基础
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...
- Vue学习计划基础笔记(一) - vue实例
最近又重新看vue的文档了,计划是别人写的,之前看过一次,没有考虑太多,只考虑看懂能用就好.看完之后写过写demo,现在是零实际项目经验的,所以这一次打算细看,算是官方文档的二次产物吧,但是不是全部直 ...
- Vue学习计划基础笔记(四) - 事件处理
事件处理 目标: 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符 理解在html中监听事件的意义 监听事件(v-on) 类似普通的on,例如v-on:click或@click就相当于普通的 ...
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- Vue学习(二):class与style绑定
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...
- 学习webpack基础笔记01
学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...
- react 入坑笔记(五) - 条件渲染和列表渲染
条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
随机推荐
- mysql5.6编译安装
1.安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl -y yum -y install wget gcc-c++ ncurses nc ...
- PDO介绍(16)
安装PDO PDO的数据选项 链接到数据库服务器并选择数据库 错误处理 获取和设置属性 查询执行 准备语句介绍 获取数据 设置绑定列 处理事务
- 【Javascript-基础-Date】本地时间与UTC(GMT)时间转换
UTC(GMT) 整个地球分为二十四时区,每个时区都有自己的本地时间.在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinat ...
- 转发: Angular装饰器
Angular中的装饰器是一个函数,它将元数据添加到类.类成员(属性.方法)和函数参数. 用法:要想应用装饰器,把它放在被装饰对象的上面或左边. Angular使用自己的一套装饰器来实现应用程序各部件 ...
- Python中模块
模块 模块对我来说是什么 模块对我来说,感觉就像亲属或者朋友已经走过的路,他们已经趟过的浑水.掉过的坑.践行过的路线,全部提供给你,在你需要的时候请求帮助,借鉴他们的解决方法一样.都是为了方便走好人生 ...
- flask中的蓝图实现模块化的应用
Blueprint 蓝图的基本设想是当它们注册到应用上时,它们记录将会被执行的操作. 当分派请求和生成从一个端点到另一个的 URL 时,Flask 会关联蓝图中的视图函数. 简单来说,Blueprin ...
- table(表格)中的标签和属性
1.表格由 <table> 标签来定义.行( <tr> ),单元格(<td> ) 字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以 ...
- echarts踩坑---容器高度自适应
在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题. 具体解决办法如下: <d ...
- 学在Java之前
java基础 下载JDK JDK(Java Development Kit Java开发工具包) 官方网址: www.oracle.com 参阅oracle.html ...
- Microbit蓝芽配对
Microbit蓝芽配对 (Bluetooth Pairing) Microbit 可以像手机或平板与其他蓝芽装置一样,一旦做完第一次配对完就可以使用”蓝芽服务” paired with the mi ...