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和数组的绑定)

//这个样式由数组里的对象所决定,写法和class一样,只不过改为数组形式就行了。而且因为是数组,所以可以挂载多个对象(如上图第12行代码,但要注意书写格式)
//第12行和第22行显示效果一样的,因为数组可以挂载多个对象
//所以,显示的效果如下:

3-5 Vue中的样式绑定的更多相关文章

  1. vue.js(7)--vue中的样式绑定

    vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. vue中的样式绑定

    样式绑定 样式绑定有class绑定和style绑定,这里我们分别说说 class绑定 class样式绑定与有两种语法:对象语法(v-bind:class='{active:isActive}').数组 ...

  3. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  4. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  5. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  6. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  7. 深入理解 vue 中 scoped 样式作用域的规则

    哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...

  8. Vue.js:样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  9. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

随机推荐

  1. nlp算法工程师养成记 目标要求

    时间规定: 2018.12.07-2018.02.15 能力养成: linux, shell python, c++(会多少算多少) tensorflow, keras, pytorch(tf优先) ...

  2. 数组中的逆序对(python)

    题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...

  3. etcd集群部署与遇到的坑

    在k8s集群中使用了etcd作为数据中心,在实际操作中遇到了一些坑.今天记录一下,为了以后更好操作. ETCD参数说明 —data-dir 指定节点的数据存储目录,这些数据包括节点ID,集群ID,集群 ...

  4. 9. Palindrome Number (JAVA)

    Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same back ...

  5. Poiji:基于列名绑定方式将Excel单元行转换为JavaBean的开源框架

    公司的日常事务中经常需要使用excel进行数据汇总,导入导出进行归类统计分析. 因为没有广泛流行的单元行到类转换/属性绑定工具,在功能开发之初或者很长一段时间内, 业务系统中我们处理普通excel数据 ...

  6. PHP开发——函数

    函数的定义 l  函数是一段命名的代码段. 函数可以减轻工作量,减少重复的代码,方便后期维护. 函数的参数 l  实参:调用函数时,传递的参数就是实参,含有真正数据的. l  形参:定义函数时的参数. ...

  7. boost asio 学习(一)io_service的基础

    原文  http://www.gamedev.net/blog/950/entry-2249317-a-guide-to-getting- started-with-boostasio/ 编译环境 b ...

  8. Chapter3_操作符_关系操作符

    java中的关系操作符有等于“=”,不等于“!=”,大于“>”,小于“<”,大于等于“≥”,小于等于“≤”等.这些都不再赘述了,有一个有意思的点是关于等价性的讨论. 在java中测试两个对 ...

  9. Java集合:ConcurrentHashMap原理分析

    集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...

  10. shell脚本中跳转另一台主机执行命令 <<EOF

    ssh vmuser@ <<EOFmkdir /home/vmuser/xunjianrm /home/vmuser/xunjian/xj.logtouch /home/vmuser/xu ...