3-5 Vue中的样式绑定
Vue中的样式绑定:
本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果
方法一:【class】
①(class和对象的绑定)
//如上,运用class和一个对象的形式来解决样式和数据的绑定效果,这种语法叫做class的对象绑定
//效果如下图:
//当点击div,右侧的html代码就会给div添加一个class,并且实现div中的文字变红色的效果。。。
======================================================
②(class和数组的绑定)
//如上,运用class和数组相绑定的用法,当这个数组里面写了一个内容,这个内容是个变量。class上会显示这个变量对应的内容
//显示效果和之前一样
=========================================================
方法二:【style】
①(style和对象的绑定)
//这里运用style结合对象的形式来编写。data中接收传进来的styleObj对象,styleObj里面的书写格式和css一样
//显示效果如下图:
//运用这种方法,div中添加了style属性,默认为black。当点击div,style的值就变成了red。因此达到实现效果。。。
======================================================
②(style和数组的绑定)

3-5 Vue中的样式绑定的更多相关文章
- vue.js(7)--vue中的样式绑定
vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- vue中的样式绑定
样式绑定 样式绑定有class绑定和style绑定,这里我们分别说说 class绑定 class样式绑定与有两种语法:对象语法(v-bind:class='{active:isActive}').数组 ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- VUE中CSS样式穿透
VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...
- 深入理解 vue 中 scoped 样式作用域的规则
哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...
- Vue.js:样式绑定
ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...
- Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
随机推荐
- nlp算法工程师养成记 目标要求
时间规定: 2018.12.07-2018.02.15 能力养成: linux, shell python, c++(会多少算多少) tensorflow, keras, pytorch(tf优先) ...
- 数组中的逆序对(python)
题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...
- etcd集群部署与遇到的坑
在k8s集群中使用了etcd作为数据中心,在实际操作中遇到了一些坑.今天记录一下,为了以后更好操作. ETCD参数说明 —data-dir 指定节点的数据存储目录,这些数据包括节点ID,集群ID,集群 ...
- 9. Palindrome Number (JAVA)
Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same back ...
- Poiji:基于列名绑定方式将Excel单元行转换为JavaBean的开源框架
公司的日常事务中经常需要使用excel进行数据汇总,导入导出进行归类统计分析. 因为没有广泛流行的单元行到类转换/属性绑定工具,在功能开发之初或者很长一段时间内, 业务系统中我们处理普通excel数据 ...
- PHP开发——函数
函数的定义 l 函数是一段命名的代码段. 函数可以减轻工作量,减少重复的代码,方便后期维护. 函数的参数 l 实参:调用函数时,传递的参数就是实参,含有真正数据的. l 形参:定义函数时的参数. ...
- boost asio 学习(一)io_service的基础
原文 http://www.gamedev.net/blog/950/entry-2249317-a-guide-to-getting- started-with-boostasio/ 编译环境 b ...
- Chapter3_操作符_关系操作符
java中的关系操作符有等于“=”,不等于“!=”,大于“>”,小于“<”,大于等于“≥”,小于等于“≤”等.这些都不再赘述了,有一个有意思的点是关于等价性的讨论. 在java中测试两个对 ...
- Java集合:ConcurrentHashMap原理分析
集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...
- shell脚本中跳转另一台主机执行命令 <<EOF
ssh vmuser@ <<EOFmkdir /home/vmuser/xunjianrm /home/vmuser/xunjian/xj.logtouch /home/vmuser/xu ...