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 ...
随机推荐
- Loadrunner测试webservice协议总结
Loadrunner测试webservice协议总结 一.协议选择 1.打开Virtual user generator,新建脚本,选择webservice协议
- Gradle Goodness: Add Incremental Build Support to Custom Tasks with Annotations
In a previous post we learned how we can use the inputs and outputs properties to set properties or ...
- spring boot 配置Rabbit
单独安装Rabbit服务并设置启动,可以通过浏览器访问,一般访问地址是http://localhost:15672/ ,用户名密码看配置文件的用户名密码 1 实例化配置类注解 import org.s ...
- 数据库事务ACID特性及隔离级别
数据库ACID特性介绍 1.原子性(Atomic)一个事务被视为一个不可分割的最小工作单元,这个事务里的所有操作要么全部成功执行,要么全都不执行,不能只执行其中的一部分操作.实现事务的原子性,要支持回 ...
- Oracle 安全性一
创建和管理数据库用户账户 用户账户属性 用户账户拥有很多在创建账户时定义的属性.这些属性将应用于连接到账户的会话,在会话运行期间,DBA或会话可以更改其中一些属性. 用户名 身份验证方法 默认表空间 ...
- volatile关键字到底做了什么?
话不多说,直接贴代码 class Singleton { private static volatile Singleton instance; private Singleton(){} //双重判 ...
- 位图索引对于DML操作的影响
位图索引相对于常规的B-tree 索引,有着体积更加小的优势,节省空间.对于重复率特别高的字段,比如性别,比如省份.查询效率要优于B-tree 索引.那为什么我们总被告知在业务库中不要使用呢? 业务库 ...
- leyer不写content参数直接传递给子页面数据
function btnAddClickownfund(){ //获取数据 var actual = $("#actual_capitals").html().trim(); // ...
- java 关于String
1.两种创建方式 String str1 = "abc"; //字面量创建 String str2 = new String("abc"); //构造方法创建 ...
- 苹果App Store提交app审核时EULA(终端用户软件使用条款)的注意事项等政策解读
写在前面,今天是2014年10月14日,以下内容可能会随着时间的推进而失效,请注意时效性 当在App Store提交app审核的时候,苹果通常会要求开发者提供一个EULA,苹果默认提供了一个,地址: ...