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. Windows驱动开发调试工具

    [开发工具] VS2012 [调试工具] Windbg:和VM配合实现双机联合调试,完成双机调试功能,可以结合<软件调试>这本书对Windbg有较为深入的认识. DebugView: 可以 ...

  2. ASP 错误捕捉,处理

    Asp利用 On Error Resume Next捕捉异常,根据Err.Number判断是否有错误 注:On Error Goto 0取消捕捉异常 模板文件页面 <% Response.Buf ...

  3. 65. Valid Number 判断字符串是不是数字

    [抄题]: Validate if a given string is numeric. Some examples:"0" => true" 0.1 " ...

  4. git 使用遇到的问题

    本博客只记录遇到的问题和解决方案 问题一:git上与本地不同步无法上传 先git pull origin master再git push -u origin master(实在不行或者清空本地,或者清 ...

  5. node.js中path路径模块的使用

    path模块是node.js中处理路径的核心模块.可以很方便的处理关于文件路径的问题. join() 将多个参数值合并成一个路径 const path = require('path'); conso ...

  6. centos7 下安装pycharm

    CentOS 7环境下Pycharm安装流程记录: 1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/p ...

  7. Hello SIP Protocol

    SIP Request Line Request-Line = Method SP Request-URI SP SIP-Version CRLFMethod:        1. REGISTER ...

  8. jsp相关笔记(一)

    1.在html中调整两个<p>标签之间的间距,可以用margin属性: p { margin: 0.2em 0;} 2.在jsp中要对页面分成上.左.右三栏时,可以用<framese ...

  9. ubuntu,day 2 ,退出当前用户,创建用户,查找,su,sudo,管道符,grep,alias,mount,tar解压

    本节内容: 1,文件权限的控制,chmod,chown 2,用户的增删和所属组,useradd,userdel 3,用户组的增删,groupadd,groupdel 4,su,sudo的介绍 5,别名 ...

  10. ABP 异常处理 第四篇

    1.ABP异常处理机制是通过过滤器实现的,我们查看的webAPI的异常处理,我们来看看他的源码,AbpApiExceptionFilterAttribute 继承ExceptionFilterAttr ...