学习
实践
活动
专区
工具
TVP
写文章

Class与Style绑定

本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性). 因此,再将v-bind用于class和style属性时,Vue.js做了专门的增强,表达式结果类型除了字符串以外还可以是对象或者数组. 1、对象语法 (1)、绑定的数据对象内联在模版中 我们可以通过给html 如上代码所示,v-bind:class指令可以和普通class共存,当isActive和hasError发生变化时,class列表也会进行相应的更新, (2)、绑定的数据对象不内联在模版中 <body> 结果和(1)中的一模一样. (3)、绑定的数据对象不内联在模版中,且该数据对象可以通过计算属性得出 <body>

  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    21 vue 组件中 Class绑定

    目录 一般绑定 对象绑定 数组绑定 父子组件中类名覆盖的情况 小结 一般绑定 对于样式类的绑定,使用v-bind就能满足需求,但vue为class绑定作了特别的优化。 所以vue分别使用对象语法与数组语法加强了class绑定。 对象绑定 以下这三种写法,都是对象绑定的语法: <! 第一种是在表达式中拼合对象,对象的键是class,值是布尔,控制class的启用与否。 第二种是直接绑定对象,第三种是使用计算属性。三种对象的格式都是一样的,键名为class,键值为是否显示。 数组绑定class属性上,除了使用对象,还可以使用一个数组。以下两个是数组绑定的语法: <! vue计算属性和侦听器 21 vue 组件中 Class绑定

    62710
    25 26 --4.我们可以绑定返回对象的计算属性;比较常用且强大--> 27 <div :class="classObject1">this will be red
    28 29 <! --:style绑定到样式对象--> 41
    this is style2
    42
    43 <!

    23800

    Vue学习4:class与style绑定

    --这里:class等价于v-bind="class",使用了缩写--> 15 16 <! --1.为:class设置一个对象,从而可以切换class--> 17 <div :class="{classA:isClassA}">this will be orange

    18 --3.我们也可以直接绑定数据里的一个对象--> 24 <div :class="classObject">this will be same to the second
    25 26 --4.我们可以绑定返回对象的计算属性;比较常用且强大--> 27 <div :class="classObject1">this will be red
    28 29 <! --:style绑定到样式对象--> 41
    this is style2
    42
    43 <!

    24510

    Vue动态绑定Class的几种方式

    对象方法 最简单的绑定 这里的active加不加单引号都可以,以下也一样都能渲染,但是如果你的class需要 - 连接的,必须用引号。 :class="{ active: isActive }" :class="{ 'c-active': isActive }" 判断是否绑定一个active :class="{'active':isActive ==-1}" 或者 :class="{'active':isActive==index}" 绑定并判断多个 第一种(用逗号隔开) :class="{ 'active': isActive, 'sort ': isSort }" 第二种(放在data里面) 也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样 :class="classObject" data() { return 注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染 :class="[isActive?'

    2.2K10

    Vue.js-Class与Style绑定

    ,也可以用,绑定class对象可以与原始的class共存 (2)直接绑定数据里的一个对象         <div v-bind:class="classObject">

                         active: true,             'text-danger': false              }        } (3)我们也可以在这里绑定返回对象的计算属性 > 最终将被渲染为: <p class="foo bar baz boo">Hi

    同样的适用于绑定 HTML class: <my-component v-bind:class="{ active  绑定内联样式 #对象语法 v-bind:style对象语法非常直观--看着非常像css,其实它是一个javascript对象
    data: {   activeColor: 'red',   fontSize: 30 } 直接绑定到一个样式对象通常更好

    36420

    Vue.js之Class 与 Style 绑定

    https://blog.csdn.net/sinat_35512245/article/details/53958235 数组语法: 我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表: <div v-bind:class="[activeClass, errorClass]">wo

    ?

    34110

    Vue入门---属性、style和class绑定方法

    一 、用对象的方法绑定class 1 <! DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>class与style绑定</title> 6 关于使用对象绑定class,还可以用另外一种写法: 1 <! 二 、用数组的方法绑定class 1 <! 三、  用数组和对象混合的方法绑定class 1 <!

    31840

    vue class与style 绑定详解——小白速会

    一、绑定class的几种方式 1.对象语法 直接看例子:

    <div :class="{'success':isSuccess,'fail':isFail }">对象绑定class
      //简单的处理直接使用数据来判断 <div :class="classes">计算属性绑定class
      //当class的表达式过长或逻辑复杂时 [successCls,failCls]">绑定多个class属性
      //用于来绑定多个class属性 <div :class="[{'success':isSuccess} ,failCls]">绑定多个class属性一  //动态的判断添加那些class属性,是最常用的 var app4 = new Vue({ el: '#app4 > Vue.component('my-component',{ template: '<div class="fail">绑定组件class属性' }); var

    52850

    vue.js 动态绑定class的几种方式

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。 被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定class就变得非常简单。 iPhone X <div class="bottom" :class="{'footer':isIphoneX}">

    data () { return { isIphoneX class="[isIphoneX ? vue数据和class都符合双向绑定的规则!

    3K20

    Vue入门详解之绑定class和style样式

    绑定class 绑定class两种方式第一使用对象方式,第二使用数组方式进行绑定 对象方式     <style>         *{             padding:0;              .actived{             color:hotpink;         }     </style> </head> <body>

        <h1  :class ,点击后改变这个isClick取值,我们在style中定义了这个.actived的颜色可以使用不同class显示不同颜色! 直接绑定style样式 上面通过两种方式绑定class,间接改变了css样式!我们能否直接去改变这个style样式呢?答案当然是可行的! 这样直接就绑定了CSS样式无需绑定class

    61620

    Vue.js动态绑定class,实现各色花式需求

    在项目中我们经常遇到需要动态切换class的需求,比如说点击图片放大,又或者选中项变颜色,再比如实现换皮肤的功能等等。这时候vue的动态class就能帮助我们了。 使用对象控制class boolean控制 <div v-bind:class="{ active: isActive }">

    在上面的语法中,active是class的名字,isActive 是一个控制class动态展示的boolean值。 当然以上是对象控制class最简单的用法。 多个boolean控制多个class。我们可以将它扩展成如下的样子以达到更复杂的样式控制。 使用数组控制class 我们可以把一个数组传给 v-bind:class,以应用一个 class 列表 <div v-bind:class="[activeClass, errorClass]"></div

    65730

    Vue之v-bind动态绑定class(数组语法)

    <meta charset="UTF-8"> <title>Title</title> </head> <body>

    <h2 class ="title" :class="['active','line']">{{message}} <h2 class="title" :class="[active,line ]">{{message}} <h2 class="title" :class="getClasses()">{{message}}

    23730

    小程序框架mpx中 多层嵌套循环 绑定class

    先看一下想要实现的效果图 如下 1 首先渲染一个循环创建两个图片 2 每个图片下有是一个循环创建一个时间轴 3 时间轴分两部分 第一部分只展示时间 第二部分要根据字段中 true 和 false(自定义) 来绑定选中的状态 "> <view class="meeting-item-left">{{item.name}}</view> <view class="meeting-item-right"> <text class="text--price">{{item.price}}</text> <text class="text--price-">券/时</text> </view block 子组件中 <template> <view class="meeting-item-scroll-item" wx:if="{{items}}"> <view class="item_ :class="{{ {'bge500op' : items['leftAct']} }}" id="{{items.left}}"> </view> <view class="

    56430

    VUE2.0 学习(六)Vue 里面绑定样式,追加样式,对象形式绑定class

    目录 动态绑定class样式 绑定多个,以数组形式绑定,追加样式 对象形式绑定class 总结 动态绑定class样式 我们有一个需求,点击了一个按钮,当前的背景进行变化,这个就是动态的绑定样式了。 以上就是动态写法,前面的class是固定的,就是基础的样式,我们在后面动态的绑定样式 点击事件的方法是 以上就动态的绑定样式了 绑定多个,以数组形式绑定,追加样式 以后我们想要改变样式 ,或者追加样式,直接动态的改变这个数组就可以了 对象形式绑定class 对象里面,以true 和 false的形式确定是否需要不同的样式 总结

    17740
    点击加载更多

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券