精华内容
下载资源
问答
  • Vue动态绑定样式

    2019-10-14 20:48:52
    Vue动态绑定样式——class 1.对象语法 { className:数据模型 } <div :class="{myclass1:show}" id="ss"></div> <script> let vm = new Vue({ el: "#ss", data: { ...

    Vue动态绑定样式——class

    1.对象语法
    { className:数据模型 }

     <div :class="{myclass1:show}" id="ss"></div>
        <script>
            let vm = new Vue({
                el: "#ss",
                data: {
                    show: true,
                },
            })
        </script>
    

    2.数组语法
    [ 数据模型1,数据模型2 ]

      <div :class="[myclass1,myclass2]" id="ss"></div>
        <script>
            let vm = new Vue({
                el: "#ss",
                data: {
                    myclass1: 'o1',
                    myclass2: 'o2',
                },
            })
        </script>
    

    3.表达式

      <div :class="[my<7?myclass1:myclass2]" id="ss"></div>
        <script>
            let vm = new Vue({
                el: "#ss",
                data: {
                    myclass1: 'o1',
                    myclass2: 'o2',
                    my: 5,
                },
            })
        </script>
    

    Vue动态绑定样式——style

    1对象语法:

    <div :style="{color:color,fontSize:size+'px'}"  id="ss">你好中国</div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                color:'red',
                size:30,
            },
        })
    </script>
    

    直接绑定到一个样式对象通常更好,这会让模板更清晰:

      <div :style="styleObject"  id="ss">你好中国</div>
        <script>
            let vm = new Vue({
                el: "#ss",
                data: {
                    styleObject:{
                        color:'red',
                        fontSize:'30px',
                    }
                },
            })
        </script>
    

    2.数组语法:

    <div :style="[css1,css2]" id="ss">你好中国</div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                css1: {
                    fontSize: '48px',
                    color: 'red',
                },
                css2: {
                    width: '200px',
                    height: '200px',
                    background: 'green',
                }
            },
        })
    </script>
    

    3:表达式:

    <div :style="!color?css1:css2" id="ss">你好中国</div>
        <script>
            let vm = new Vue({
                el: "#ss",
                data: {
                    css1: {
                        fontSize: '48px',
                        color: 'red',
                    },
                    css2: {
                        width: '200px',
                        height: '200px',
                        background: 'green',
                    },
                    color: false,
                },
            })
        </script>
    
    展开全文
  • 今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • <el-button class="formButton" @click="switchForm()" v-bind:style="{ color: activeColor,background: activeBackground }">表格</el-button> data activeColor: '#000000', activeBackground: '#...

    在这里插入图片描述
    在这里插入图片描述

    HTML

    <el-button class="formButton" @click="switchForm()" v-bind:style="{ color: activeColor,background: activeBackground }">表格</el-button>
    

    data

          activeColor: '#000000',
          activeBackground: '#ffffff',
    

    JS

        switchForm() {
          this.activeColor = '#FFFFFF'
          this.activeBackground = '#2a76cd'
          this.chartColor = '#000000'
          this.chartBackground = '#FFFFFF'
        },
    
    展开全文
  • vue 动态绑定样式

    2019-07-12 11:18:55
    常用动态绑定样式: class 先看下官方文档: 对象语法 :class="{ property : truth }" 动态绑定class,我们可以传给v-bind一个对象,动态切换class <div id="app" class="active" :class="{show:isShow,...

    常用动态绑定样式:

    class

    先看下官方文档:

    对象语法   :class="{ property : truth }" 

    动态绑定class,我们可以传给v-bind一个对象,动态切换class

    <div id="app" class="active" :class="{show:isShow,hidden:isHidden}">
    </div>
    <script>
     var vm = new Vue({
        el:"#app",
        data:{
            isShow:true,
            isHidden:false
        }
     })
    </script>

    渲染结果:

    <div id="app" class="active show"></div>

    上边代码,是否给div加上类名show 和 hidden,取决后边返回值,true显示,false隐藏,多个属性中间逗号隔开,动态绑定的class可与普通class共存。

    如果动态绑定的class很多,可写在data中,可读性、维护性更优:

    <div id="app" class="active" :class="classObject">
    </div>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            classObject:{
                show:true,
                hidden:false
            }
        }
    })
    </script>

    但实际开发中,在复杂场景中,我们更希望用计算属性去监控状态的变化,这里如果用watch代码写起来很臃肿,且watch无缓存:(下边代码别忘了,计算属性classObject要返回一个对象)

    <div id="app" class="active" :class="classObject">
    </div>
    <script>
     var vm = new Vue({
        el:"#app",
        data:{
            show:true,
            hidden:false
        },
        computed:{
            classObject(){
                return {
                    isShow:this.show,
                    isHidden:this.hidden
                }
            }
        }
     })

    数组语法   :class = " [ property1 , property2 , ··· ] " 常用

    可以给 :class传一个数组,是一个class类名列表

    <div id="app" class="active" :class="[showClass,hiddenClass]">
    </div>
    <script>
     var vm = new Vue({
        el:"#app",
        data:{
            showClass:"is-show",
            hiddenClass:"is-hidden"
        }
     })
    </script>
    

    数组中的类名也可以根据判断显示:

    <div id="app" class="active" :class="[isshow ? 'showClass' : 'hiddenClass']">
    </div>
    <script>
     var vm = new Vue({
        el:"#app",
        data:{
            isshow:true
        }
     })
    </script>

    渲染结果:

    <div id="app" class="active showClass"></div>

    上边代码,根据isshow的结果判断显示showClass还是hiddenClass( 通常我会用它做图片切换! )

     

    style

    :style="{ styleProperty: property }" 

    内联样式的动态绑定:属性用驼峰式写法

    对象语法:

    <div id="app" :style="{color:isColor,backgroundColor:bgColor,fontSize:size + 'px'}">1</div>
    <script>
     var vm = new Vue({
        el:"#app",
        data:{
            isColor:"red",
            bgColor:"#444",
            size:30
        }
     })
    </script>

    也可以绑定一个样式对象:

    <div id="app" :style="styleObject">1</div>
    <script>
     var vm = new Vue({
        el:"#app",
        data:{
            styleObject:{
                color:"red",
                backgroundColor:"#444",
                fontSize:"30px"
            }
        }
     })
    </script>

    上边代码写法,回访模板更清晰,明了,可读性更高。

    同样绑定对象也可以放在计算属性中去监控。。。

    在组件中的样式绑定我会在后期补充上!!!

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

    千次阅读 2019-06-28 21:19:15
    1.直接在元素上通过:style的形式,书写样式对象<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 在data上定义样式data:{ styleObj1:...

    1.直接在元素上通过:style的形式,书写样式对象
    <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>


    2.将样式对象定义在data中,并直接引用到:style中
    在data上定义样式
    data:{
          styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
    }

    在元素中,通过属性绑定的形式,将样式对象应用到元素中
    <h1 :style="styleObj1">这是一个H1</h1>
    3.在:style中通过数组,引用多个data上的样式对象
    在data上定义样式
    data:{
          styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
          styleObj2:{'font-style':'italic'},
    }

    在元素中,通过属性绑定的形式,将样式对象应用到元素中
    <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
    完整代码:

    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        </head>
    <body>
      <div id='app'>
      
        <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
    
        <h1 :style="styleObj1">这是一个H1</h1>
    
        <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
    
      </div>
    </body>
    <script src="vue.min.js"></script>
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
          styleObj2:{'font-style':'italic'},
        }
      });
    </script>
    </html>

     

    展开全文
  • vue动态绑定样式【三元表达式】

    万次阅读 2018-09-20 11:37:27
    三元表达式 :style="{disabled:!amendPhoneIsShow?'':'disabled'}" 三元表达式和class共存:class="[{'active':navIndex==4},'nav4']" 
  • vue动态绑定多个样式

    千次阅读 2019-12-25 14:21:18
    在项目开发的过程中遇到这样一个需求:有一个节点的状态的显示,使用了element的时间线的组件,但是这个节点的状态有十几种,不同的状态有不同的显示方式,也就是说动态绑定样式。 1、一开始的想法 这原本不复杂,...
  • vue动态绑定样式

    2019-07-08 15:11:12
    :class=" flag?‘css1’:‘css2’ "
  • vue动态添加style样式 注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff ...
  • vue动态绑定Class样式

    2020-10-24 10:26:05
    --vue代码--> <ul> <li v-for="item in itemData" :key="item"> <i :class="item.isA ? 'class_a' : 'class_b'"></i> </li> </ul> <!-- CSS代码 --> .class_...
  • vue 动态绑定class样式

    2019-09-11 22:22:11
    //静态class 与动态 class 结合 ['zf-cirle',{zactive:sc==1}]" @click="sc1"> <!-- 在为 class 使用 v-bind 绑定 对象的时候,对象的属性是类名,由于 对象的属性可带引号,也可不带引号,所以 这里我没写...
  • VUE 动态绑定class

    千次阅读 2019-10-12 12:07:01
    第一种:通过一个布尔值判断样式类是否生效 //isActive 是在data里面布尔值, rotateRight 是 class 样式类 //isActive 为true时样式类 rotateRight 生效 <div :class="{rotateRight:isActive}">abs</...
  • 2.动态绑定,class前面要加冒号,如:<p :class="xxx"> ,这里的xxx常见有两种:变量和对象,当某件事件触发后,引起xxx的最终值改变,从而影响到标签的样式改变 当xxx为变量时,data中给xxx:'aCl...
  • :style="1 === 1 ? 'color: red;' : ''
  • <div class="item" v-for="(item,index) in dataList" :key="index"> <div :style="{background:item.value ? '#FFFFFF' : '#000000'}"> </div> ...以上是一个简单的循环列表,根据每一项不同的的...
  • 静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的...
  • vue样式动态绑定

    2019-02-22 16:49:14
    v-on 简写: :class string [] 数组中可以是变量也可以是string 会将数组中的",“去除后渲染在dom object {} 将 key 作为class 渲染在dom上 :attr string [] 不会去除”," {} 显示 object ...
  • VUE动态绑定Css样式、Style行内样式

    千次阅读 2020-08-15 14:42:20
    VUE动态绑定Css样式、Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue样式问题,一直以来这一块自己也没有好好...
  • Vue给标签动态绑定样式class或者style

    千次阅读 2020-07-02 21:05:02
    我的项目中实际使用的是vue+element ui :class :class等同于 v-bind:class 借用Vue官网的解释: <div v-bind:class="[active: isActive ]"></div>...你可以在对象中传入更多字段来动态切换多
  • vue中style样式动态绑定

    万次阅读 2019-08-16 10:58:41
    方法一: ... <div class="videoMa" ref="videoMa" style="width:100%;height:100%;"> ...div id="playWnd" class="playWnd" :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"&...
  • 如题:vue中如何根据数据(假数据数组对象dataStatus中,有一项数据status)动态改变样式,若status值为'正常',div的背景颜色为蓝,若status值为异常,div背景颜色为红
  • Vue.js 动态绑定CSS样式

    万次阅读 2018-07-30 15:54:23
    a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式) html &lt;!--vue-app是根容器--&gt; &lt;div id="vue-app"&gt; &lt;input type="button...
  • vue如何动态绑定style样式

    千次阅读 2020-07-08 12:06:10
    ,'font-size': '14px'}" :class="row.flag === 1 ? 'icon-_Txiaoxitishi':'icon-_... // style 中的任何属性都可以通过此方式去动态绑定 去修改值 ```javascript data() { return { cNodeColor: '#008ecf', }; },
  • 有时在项目中需要给动态绑定style中的一些带划线( - )的属性进行赋值,这时因为字符的原因会出现编译错误 错误示范: <view class="statusBar" :style="{margin-top: statusBarHeight}"></view> ...
  • vue动态绑定图标

    2021-05-21 15:36:57
    vue使用图标0 安装`svg`1 安装`svg`2 从图标库下载图标3 查看插件的使用方法4 做一个动态组件用来动态展示图标 0 安装svg 图标时字符,图片时二进制流。即图片加载会比图标慢,且加载图标最好不要用img标签,我们...
  • Vue 动态绑定CSS样式

    2021-04-14 15:55:02
    动态绑定CSS样式 绑定了changeColor样式,changeC是判断条件,根据条件changeC控制css加与不加 <div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC"> <span>示例一</span>...
  • vue 动态绑定

    千次阅读 多人点赞 2021-07-12 21:51:59
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。[5]与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既...
  • vue 通过动态绑定class,改变样式

    千次阅读 2018-10-25 10:02:48
    根据输入框或者下拉选择框有没有值,改变按钮可不可用,及按钮颜色 &lt;el-select v-model="selectData.id" placeholder="请选择"&gt; &lt;el-option label="...el-option

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,429
精华内容 14,571
关键字:

vue动态绑定样式

vue 订阅