精华内容
下载资源
问答
  • class和style动态绑定
    2021-01-15 08:23:09

    Class 与 Style 如何动态绑定?

    class可以通过对象语法和数组语法进行动态绑定:
    对象语法:

    <div v-bind:class="{'active':isActive,'text-danger':hasError}"></div>
    
    data:{
    	isActive:true,
    	hasError:false
    }
    

    数组语法:

    <div v-bind:class="[isActive?'activeClass':'',errorClass]"></div>
    
    data:{
    	isActive:true,
    	activeClass:'active',
    	errorClass:'text-danger'
    }
    

    Style也可以通过对象语法和数组语法进行动态绑定:
    对象语法:

    <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div>
    
    data:{
    	activeColor:'red',
    	fontSize:30
    }
    

    数组语法:

    <div v-bind:style="[styleColor,styleSize]"></div>
    
    data:{
    	styleColor:{
    		color:'red'
    	},
    	styleSize:{
    		fontSize:'24px'
    	}
    }
    
    更多相关内容
  • 一、动态绑定class。 可以使用v-bind绑定,如“v-bind:class = ''”,缩写:“:class = ''”。 不同形式: 1.数组形式(类名必须用''包起来): <div :class="['red', 'font16']">内容</div> 2....

    一、动态绑定class。

    可以使用v-bind绑定,如“v-bind:class = ''” ,缩写:“:class = ''”。

    不同形式:

    1.数组形式(类名必须用''包起来):

    <div :class="['red', 'font16']">内容</div>

    2.数组中使用三元表达式:

    <div :class="['red', 'thin', isactive?'red':'yellow']">内容</div>

    说明:如果“isaction”的布尔值为true,那么使用“red”类,否则“yellow”。

    3.数组中嵌套对象:

    <div :class="['red', 'thin', {'active': isactive}]">内容</div>

    说明:“ {'active': isactive}”中的“isactive”的值为true时,那么使用该类。为false就不使用该类。

    4.直接使用对象:

    <div :class="{red:true, italic:true, active:true, thin:true}">内容</div>

    说明:此对象中,键与值一一对应,当前值为true的时候,当前对应的键(也就是类名)就使用,为false就不应用。

    不需要动态绑定的类:

    <div class="static" :class="{'active':isActive,'error':isError}"></div>

    另外,:class可以与普通class共存

    二、动态绑定style。

    可以使用v-bind绑定,如“v-bind:style = ''” ,缩写:“:style = ''”。

    不同形式:

    1.直接用v-bind绑定 :style = '':

    <div :style="{color: 'red', 'font-size': '40px'}">这是一个文本</div>

    如果对象的键有特殊符号“-”等等,那么要用引号括起来。

    2.将样式对象,定义到 data 中,并直接引用到 :style 中

      data: {
          styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
      }
    

    3.如果绑定多个,则写在一个数组中

    <div :style='[styleObj1, styleObj2]'>这是一个文本</div>

    绑定样式名时,如果写成驼峰命名,则不需要引号,如果是复杂命令,则需要加引号

    展开全文
  • 先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{...style="{height:checkType?'423px':'385px'}" src=
  • uni-app中class和style动态绑定

    千次阅读 2020-05-30 16:19:01
    -- class 支持的语法: --> <!-- <view :class="{ 'active': isActive}">111</view> <view :class="{ 'active': isActive, 'text-danger': hasError}">111</view> <view :class="...
    <!-- class 支持的语法: -->
    <!-- <view :class="{ 'active': isActive}">111</view>
    <view :class="{ 'active': isActive, 'text-danger': hasError}">111</view>
    <view :class="[class1,class2]">111</view>
    <view class="static" :class="[num>10 ? 'active' : 'text-danger',class3]">444</view> -->
       	
    <!-- style 支持的语法: -->
    <!-- <view :style="{ color: activeColor, fontSize: fontSize +'px' }">666</view> -->
    
    

    class支持的语法

    <view class="box" :class="[age>10?class1:'',sex=='女'?class2:'']">box</view>

    style支持的语法

    <view class="box" :style="{'color': Color,'font-size': size+'px'}">box</view>

    完整例子

     <template>
        <view>
            <view class="box" :class="[age>10?class1:'',sex=='女'?class2:'']">绑定</view>
            <!-- style 支持的语法: -->
            <view class="box" :style="{'color': Color,'font-size': size+'px'}">绑定</view>
    
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    class1: "bor",
                    class2: "fs",
                    age:20,
                    sex:'女',
                    Color: "#333333",
                    size: 50
                }
            },
            methods: {
    
            }
        }
    </script>
    
    <style>
        .box {
            background: pink;
            color: #FFFFFF;
            width: 350upx;
            height: 350upx;
            border-radius: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50upx;
        }
    
        .bor {
            border: 10upx solid #CCC;
        }
    
        .fs {
            font-size: 80upx;
            color: #FFF;
        }
    </style>
    
    

    在这里插入图片描述

    展开全文
  • Vue中动态绑定class和动态绑定style

    千次阅读 2022-05-20 14:28:27
    动态绑定class <template> <div class=""> <div :class="{ aa: isaa > 10 ? true : false }"></div> <button @click="fn">点击显示</button> </div> </...

    一.动态绑定class

    <template>
      <div class="">
        <div :class="{ aa: isaa > 10 ? true : false }"></div>
        <button @click="fn">点击显示</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isaa: 10,
        };
      },
      name: "",
      methods: {
        fn() {
          this.isaa++;
        },
      },
    };
    </script>
    
    <style scoped>
    .aa {
      background-color: pink;
      width: 300px;
      height: 300px;
    }
    </style>
    

    解析:

    通过变量的形式来控制元素的显示和隐藏。

    代码格式:
    
    
    :class='{类名:变量名}'
    
    三元表达式写法
    :class='{类名:变量名>xxxx?true:false}'

    二.动态绑定style

    代码:

    <template>
      <div class="">
        <div :style="{ color: color, fontSize: fontsize }">123</div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          color: false,
          fontsize: "50px",
        };
      },
      name: "",
      methods: {},
    };
    </script>
    
    <style scoped></style>
    

    解析:

     <div :style="{ color: color, fontSize: fontsize }">123</div>
    
     格式:
     
     :style="{color:变量1,fontsize:变量2}"
    
      data() {
        return {
          color: false,
          fontsize: "50px",
        };
      },

    可以设置样式的显示和隐藏,也可以直接设置样式。

    view:

     

    三.总结 

    动态绑定class:

    :class='{类名:变量名}'
    变量是一个布尔值,来控制这个类名的显示和隐藏

    动态绑定style:

    :style='{样式:变量1,样式:变量2}'
    变量1和变量2可以是直接写的样式,也可以是一个布尔值来控制样式的显示和隐藏

    动态绑定class关联的是一个类名,动态绑定style关联的是样式,都是可以动态进行设置的。

    展开全文
  • vue动态绑定class和style样式

    千次阅读 2022-04-25 00:20:34
    style绑定 注意: 凡是有 - 的 style 属性名都要变成驼峰式,比如font-size要变成fontSize。 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff' 而不是 backgroundColor:#00a2ff 对象: ...
  • vue 中动态绑定class style的方法

    万次阅读 2018-06-01 15:43:04
    :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{open:appitem.open==true}]" :class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" :class="...
  • 本文介绍了Vue的ClassStyle绑定,分享给大家,具体如下: 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <style> .exp{ border: 1px solid #ccc; } .forExp{...
  • Angular-动态绑定class/style

    千次阅读 2021-05-10 16:13:05
    一、CLASS/ngClass,效果都是一样的 (1)三目运算 <span [class]="index === 0? 'specBlue' : 'specRed'"></span> (2)对象 <span [class]='objClass'></span> objClass={ 'classBlue': ...
  • uni-app动态绑定class和style

    千次阅读 2021-06-16 14:07:26
    目录动态绑定calss动态绑定style 动态绑定calss class="[{‘类名’:条件},{‘类名’:条件},{‘类名’:条件}]" 为不同条件的image绑定不同的样式 <image class="img1" :class="[{'img1':index == 0},{'img...
  • 本文主要介绍了vue.js实现绑定class和style样式的方法。具有很好的参考价值。下面跟着小编一起来看下吧
  • 本篇文章主要介绍了详解vue.js之绑定class和style的示例代码,具有一定的参考价值,有兴趣的可以了解一下
  • vue中,动态绑定样式——动态绑定style写法 & 动态class写法 1、动态绑定style写法 注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,...
  • v-bind动态绑定class 对象语法绑定(常用) redsize的值为true就在class显示redsize,false就不显示。下面有两种写法: <style> .red{ color: red; } .size{ font-size: 20px; } </style> ...
  • 效果如下:
  • 一、需求 今天碰到同事问了一个问题,根据后端返还的字段名字来绑定该名字的独有颜色,例如:'提现成功' --- 绿色。... 其实这就是Vue给我们的动态绑定写法格式问题,只不过我去翻了官网,并没...
  • 数据绑定一个常见需求是操作元素的 class 列表它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class ...
  • 1.绑定class样式 字符串写法 对象写法 数组写法 2.绑定style样式 对象绑定法 下面我们来一一介绍不同方法的使用方法及使用场景,大家可以先看代码中不同方法的使用,看不懂的小编也会在后面讲解的哦 <!...
  • 小编之前介绍了通过vue.js计算属性,不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式,有需要的朋友们可以参考借鉴。
  • Vue中的class和style样式绑定
  • 主要介绍了vue计算属性+vue中classstyle绑定,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • ClassStyle几种绑定用法

    千次阅读 2019-04-03 23:25:04
    在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, ...除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 cla...
  • 绑定class样式 写法:class = "xxx",xxx可以是字符串、对象、数组 字符串写法适用于:类名不确定、要动态获取 对象写法适用于:要绑定多个样式、个数不确定、名字也不确定 数组写法适用于:要绑定多个样式,个数...
  • 关于vue.js中classstyle绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 158,477
精华内容 63,390
关键字:

class和style动态绑定