Vue学习计划(基础三)-class与style绑定,条件渲染和列表渲染

Class与style绑定、条件渲染和列表渲染

目标:

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

class与style绑定的多种方式

  1. 绑定class和style都是使用v-bind也就是:
  2. 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组.
  3. 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>

原文地址:https://www.cnblogs.com/chifung/p/9322616.html

时间: 2024-10-29 19:12:08

Vue学习计划(基础三)-class与style绑定,条件渲染和列表渲染的相关文章

VUE:条件渲染和列表渲染

条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.条件渲染指令 v-if v-else 移除标签 v-show 通过样式隐藏 2.比较 v-if 与v-show 如果需要频繁切换 v-show 较好 --> <div id="

2017.04 vue学习笔记---08表单控件绑定---基础用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin-bottom: 30px; } </style> <script src="js/vue.js"></script> <

spring学习——Ioc基础三(Ioc配置使用)

一.XML配置的结构  一般配置文件结构如下: <beans>       <import resource="resource1.xml"/>       <bean id="bean1"class=""></bean>       <bean id="bean2"class=""></bean>   <bean name=&q

2017.04 vue学习笔记---08表单控件绑定---基础用绑定value

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin-bottom: 30px; } </style> <script src="js/vue.js"></script> <

Vue学习日记(三)——Vue路由管理vue-router

前言 为了给读者更好的体验,去理解vue-router和下一篇介绍vuex,决定还是来一个实战教程来带大家更加的去深入理解vue-router,在这之前,读者先自行了解和去官网下载npm和node,附:npm官网 项目构建 这里我采用vue-cli+webpack构建初始项目,在vue官网里面也有相关介绍,在这里我就手把手教大家一下吧,先通过控制台进入相关的文件目录下,然后输入 # 后面是注释 # $表示当前文件目录 # 全局安装 vue-cli $ npm install --global v

vue学习笔记(三)——vuex—store配置

可以将不同视图的仓库放到不同的store中. --store index.js foo.js bar.js --views Foo.vue Bar.vue App.vue main.js 1.配置单个store的信息 foo.js export default{ namespaced: true, //具名引用时使用 state: { //state状态管理(通过store.state.name访问) name: 'waite zhou', age: 25 }, getters: { // st

vue学习【第三篇】:vue之node.js的简单介绍

什么是node.js 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 安装node.js node.js的特性 - 非阻塞IO模型 - 时间驱动 运用的场景 - 高并发低业务 - 实时场景 - 聊天.电子商务.视频直播等 安装地址 http://nodejs.cn/ 判断是否安装成功 node -v 进入编辑状态:node+回车,可以进行一些运算 退出编辑模式:ctrl+d或者ctrl+c两次 npm是一个包管理器,其实是一个命令.使

Python学习字典.基础三

元组 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组中要定义的元组中只有一个元素需要再元素后面加逗号,用来消除数学歧义.例 t=(1,) 字典 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号{}中. 键必须是唯一的,但值则不必(只可以取任何数据类型,但键必须不可变) 例子: #coding=utf-8 #!/usr/bin/python student={1:'ja',2:'qw'

vue中,class、内联style绑定

1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)">产品特色</li> ②数组语法 <div v-bind:class="[classA, classB]"> 三元表达式: <div v-bind:class="[classA, isB ? classB : '']"> 表明