vue 自学笔记(4): 样式绑定与条件渲染
一:对象绑定
Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现。
假使我们要实现点击 div 变色
Vue 提供的样式方案的本质是对元素节点进行属性的绑定,由此我们可以获知它会采用v-bind
指令去绑定属性,同时我们也能知道样式内容的定义也可以放在 data 中,以下是几个绑定样式的方案。
一:对象绑定 class
我们在 div 上绑定的属性是对象方式呈现的
1: 通过指令,给元素的 class 绑定了一个对象,这个对象的属性名在样式中这样写 ,style
2: 那么给 class 绑定的对象起到了关键的作用,如果isActived
的值为真,actvated
就会生效,为假,就会失效。那么要实现点击 div 变色,就可以给其绑定一个方法,去控制isActived
的转换,自然而然就实现了点击变色。
二:数组绑定
我们在 div 的 class 上绑定的属性是以数组呈现的,我们可以将两个不同颜色的样式类写在里面,去控制它的绑定
这个时候,样式中可以写两个不同颜色的样式,在style中
在 methods 中定义方法,实现 class 属性的切换,每点击一下 div,就将数组中的一个属性名的值与样式表中的内容对应,另一个置为空。
三元运算
三:直接进行属性绑定 style 属性修改
把样式内容写在 data 中,然后直接绑定在元素的 class 属性上,这其实是数组绑定方法的修改。我们发现,其实数组绑定的实质就是在数组中的属性名,都会绑定,只是之前我们把其中一个置为空而已,例如下面的例子,我还通过在数组中添加了一个属性,修改了字体。
现在我们只需要通过点击事件,将 styleObj 中的内容修改就完成了点击变色。
四: 指令 v-if 和v-show
1 :指令 v-if 和v-show 的区别
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。因此,我们可以通过它轻松容易的控制页面某些元素的呈现。你可能也会想到编程中常用的if
与else
,Vue 也提供了 v-else 和 v-else-if 与它搭配使用。
如果在 data 中定义的 show 属性的值为真的话,那么会显示的 div 会是第一行,反之就是第二行。
如果搭配上 v-else-if,就可以实现更加特殊的效果,假设 data 中的 ifandelse: 'a'
2: 与 v-if 类似的 v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:
区别!!!!!!
它们两最大的不同就在于其采取不同的渲染方式,如果采用 v-if 的用法,不显示的元素会采用十分极端的不渲染的方式来达到不显示的表现。而 v-show 较为柔和,如果不让其显示,它只会将display: block
变为none
,它本身还是会渲染的
注意:!!!!
vue 自学笔记(4): 样式绑定与条件渲染的更多相关文章
- vue 自学笔记记录
vue 自学笔记(一): 知识内容: 安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...
- vue自学笔记
做前端也做了一段时间了,为了高薪,不能一直做网页不是~~,所以从今天开始整理vue的笔记 内容都是从网上搜集整合并且自己实践过了的,需要注意的点,也在后面标注了“注” 当然了,如果有什么问题的 ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
- vue 自学笔记(1)
从to do list 开始 一: 安装 1: 导入cdn <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js& ...
- vue基础篇---class样式绑定
因为class的绑定在实际的工作中会经常用到.所以特意记录一下,有好几种方法. 对象绑定方法,另外一个值来控制显示隐藏 <!DOCTYPE html> <html lang=&quo ...
- vue 自学笔记(三) 计算属性与侦听器
一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
- vue 自学笔记(七) 组件细节问题
前情提要: 这里盘点一下,组件细节的问题 现在我们观察一些用框架开发的网页BiliBili.掘金,会发现很多部分都十分相似或者一模一样,我们甚至可以将其拆分归类.而事实上,页面的确是被一个个组件构成的 ...
- Vue自学笔记--项目的创建
一.项目的创建 1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / ...
- vue 自学笔记(5) 列表渲染
列表渲染 一:v-for 指令 当我们涉及到列表渲染数据的时候,不可能做一个重复的工作去不停的一个一个的渲染每一项列表.并且列表数据的表现,比如从后端请求过来的数据,不可能是一个一个的单独的 JSON ...
随机推荐
- 4、python常用基础类型介绍
1.字符串 str 描述性质的一种表示状态的例如名字 word='helloworld' print(type(word),word) <class 'str'> helloworld2. ...
- iosApp上传app遇到的问题
昨天上传了两个app,是由原来的app改版之后产生了新的app上传的,出现了几个问题现在记录一下. 1.证书配置问题:报错如下 解决办法:选择一个team即可.选择完team之后还是报错: 解决方法: ...
- window.location.href 页面不跳转解决
function login() { var userid = $("#username").val(); var userpwd = $("#pwd").va ...
- java学习笔记(九):Java 流(Stream)、文件(File)和IO
Java 的控制台输入由 System.in 完成. 为了获得一个绑定到控制台的字符流,你可以把 System.in 包装在一个 BufferedReader 对象中来创建一个字符流.需要import ...
- 初学c# -- 开始学directx
这些天对directx有兴趣了,开始慢慢学,先学基础,找了好些资料,为毛都写的辣么长呢,学习精简下来就几行. 安装个directx sdk,在win10里面文件夹C:\Windows\Microsof ...
- 无监督学习算法-Apriori进行关联分析
关联分析 是无监督讯息算法中的一种,Apriori主要用来做_关联分析_,_关联分析_可以有两种形式:频繁项集或者关联规则.举个例子:交易订单 序号 商品名称 1 书籍,电脑 2 杯子,手机,手机壳, ...
- [剑指Offer]8-二叉树的下一个节点
链接 https://www.nowcoder.com/practice/9023a0c988684a53960365b889ceaf5e?tpId=13&tqId=11210&tPa ...
- ubuntu,day3,awk, vim的使用
本节内容 : 1,awk 2,vim 1,awk # 命令行调用方式 awk [-F field-separator] 'commands' input-file(s) cat /etc/passw ...
- 20165213周启航java学习总结
20165213周启航java学习总结 一.每周博客链接及二维码 预备作业一:我所期望的师生关系:http://www.cnblogs.com/rocedu/p/6255835.html#WEEK15 ...
- VB.Net 经典画圆方法
计算机图形学课程作业-----画圆 Public Class Form1 Private Sub Button1_Click(ByVal sender As System.Object, ByVal ...