精华内容
下载资源
问答
  • Vue class与style绑定

    千次阅读 2019-05-16 20:36:50
    DOM元素经常会动态的绑定一些class类名或style样式。前面的文章已经初步的介绍了v-bind指令的基本用,它主要是动态的更新HTMl元素上的属性。这篇文章将介绍使用v-bind指令来绑定class和style的多种方法。 回顾 v-...

    前面的话

    DOM元素经常会动态的绑定一些class类名或style样式。前面的文章已经初步的介绍了v-bind指令的基本用,它主要是动态的更新HTMl元素上的属性。这篇文章将介绍使用v-bind指令来绑定class和style的多种方法。

    回顾 v-bind

    回顾一下v-bind指令的用法:

    <div id="app">
             <a v-bind:href="url">github链接</a>
             <img v-bind:src="imgUrl" alt="">
             <!-- v-bind:href="url" 缩写 :href="url" -->
    </div>
    <script>
        new Vue({
            el:"#app",
            data: {
                url:"http://www.github.com",
                imgUrl:"img/Top.jpg"
            }
        })
     </scirpt>
    

    上面的a元素的href属性和img的src属性都被动态设置了,当数据变化时,就会重新渲染

    在这里插入图片描述

    class绑定

    在数据绑定中最常见的需求就是元素样式名称class和内联样式style的动态绑定,它们也是HTML的属性,因此可以 使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以,不过有时候表达式的逻辑比较复杂,使用字符串拼接方法比较难阅读。所以Vue.js增强了对class与style的绑定。

    [对象语法]

    给v-bind:class设置一个对象,可以动态地切换class,例如:

     <div id="app1">
            <div :class="{'active':isActive}"></div>
      </div>
      <script>
         new Vue({
            el: "#app1",
            data: {
                isActive:true
            }
        })
     </scirpt>
    

    上面的实例中,类名active依赖于数据isActive,当其为true时,div会拥有类名active,为false没有

    在这里插入图片描述

    对象中也可以传入多个属性,来动态的切换class。另外,:class可以与不同的class共存。

    例如:

     <div id="app2">
        <div class="static" :class="{'active':isActive,'error':isError}"></div>
     </div>
     <script>
        new Vue({
            el: "#app2",
            data: {
                isActive: true,
                isError: false
            }
        })
     </scirpt>
    
    :class内的表达式哪一项为真时,对应的类名就会加载。当数据isActive或isError变化时,对应的class类名也会更新。 
    

    在这里插入图片描述
    当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性,这是很常用的方法,一般当条件多余两个时,都可以使用data 或computed.

    例如使用data与计算属性:

    <div id="app3">
        <div :class="classes"></div>
    </div>
     <script>
          new Vue({
            el: "#app3",
            data: {
                isActive: true,
                error:  {
                    value: true,
                    type: 'fail'
                }
            },
            computed: {
                classes: function() {
                    return {
                        active:this.isActive && this.error.value,
                        "text-fail":this.error.value && this.error.type === 'fail'
                    }
                }
            }
        })
     </scirpt>
    

    在这里插入图片描述
    还可以直接绑定一个Object类型的数据 :

      <div id="app4">
            <div :class="classObject"></div>
      </div>
       <script>
       new Vue({
            el: "#app4",
            data: {
                classObject: {
                    active: true,
                    error: true
                }
            }
        })
      </script>
    

    在这里插入图片描述

    [数组语法]

    当需要应用多个class时,可以使用数组语法,给class绑定一个数组,应用一个class列表 :

        <div id="app5">
            <div :class="[activeCls,errorCls]"></div>
        </div>
        <script>
        new Vue({
            el: "#app5",
            data: {
                activeCls:"active",
                errorCls: 'error'
            }
        })
      </script>
    

    在这里插入图片描述
    也可以使用三元表达式来根据条件切换class

    例如:

     <div id="app6">
             <div :class="[isActive? activeCls: ' ', errorCls]"></div>
         </div>
      <script>
     	new Vue({
            el: "#app6",
            data: {
                isActive: true,
                activeCls: "active",
                errorCls: "error"
            }
        }) 
        </script>
    

    样式error会始终应用,当数据isActive为真时,样式active才会被应用。
    在这里插入图片描述
    class有多个条件时,这样写较为频繁,可以在数组语法中使用对象语法:

         <div id="app7">
             <div :class="[{'active':isActive},errorCls]"></div>
         </div>
      <script>
         new Vue({
            el: "#app7",
            data: {
                isActive: true,
                errorCls: "error"
            }
        })
      </script>
    

    当然,与对象语法一样,也可以使用data、computed和methods三种方法。
    以计算属性为例:

     <div id="app8">
          <button :class="classes"></button>
      </div>
        <script>
         new Vue({
            el: "#app8",
            data: {
                size: 'large',
                disabled: true
            },
            computed: {
                classes: function() {
                    return [
                        'btn',
                        {
                            ['btn-' + this.size] : this.size !== '',
                            ['btn-disabled'] : this.disabled 
                        }
                    ];
                }
            }
        })
      </script>
    

    上面例子中,样式btn会始终应用,当数据size不为空时,会应用样式前缀btn-,后加size 的值,当数据disabled为真时,会应用样式disabled。
    在这里插入图片描述
    使用计算属性给元素动态设置类名,经常用到,尤其在复用组件时,所以在开发过程中,如果 表达式较长或逻辑复杂,应该尽可能优先使用计算属性。

    style绑定

    <div id="app9">
             <div :style="{'color': color,'fontSize':fontSize + 'px'}">文本</div>
     </div>
      <script>
         new Vue({
            el: "#app9",
            data: {
                color: 'red',
                fontSize: 14
            }
        })
      </script>
    

    注意: css 属性名称使用驼峰命名或者短横分隔命名 在这里插入图片描述

    大多情况下,直接写一长串的样式不便于阅读和维护,所以一般写在dada或computed里:

      <div id="app10">
             <div :style="styles">文本</div>
      </div>
      <script>
         new Vue({
            el: "#app10",
            data: {
               styles:{
                color: 'red',
                fontSize: 14 + 'px'
               }
            }
        })
      </script>   
    

    应用多个样式对象时,可以使用数组语法 :

         <div id="app11">
            <div :style="[styleA,styleB]">文本</div>
         </div>
      <script>
        new Vue({
            el: "#app11",
            data: {
               styleA:{
                color: 'red',
                fontSize: 14 + 'px'
               },
               styleB: {
                   width: 100 + 'px',
                   border: 1 + 'px ' + 'black ' + 'solid'
               }
            }
        })
      </script>   
    

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

    展开全文
  • Vue项目:style样式篇

    千次阅读 2019-12-17 17:17:45
    三、单个vue文件中引入样式 四、样式作用范围控制 4.1 scoped私有作用域 4.2 混合使用 4.3 深度作用选择器 4.4 动态生成的dom的样式 一、动态使用样式 使用场景:根据不同的值使用不同的样式,或者给样式某个...

    目录

    一、动态使用样式

    二、全局公共css样式文件

    2.1 main.js中引入

    2.2 index.html引入

    三、单个vue文件中引入样式

    四、样式作用范围控制

    4.1 scoped私有作用域

    4.2 混合使用

    4.3 深度作用选择器

    4.4 动态生成的dom的样式


    一、动态使用样式

    使用场景:根据不同的值使用不同的样式,或者给样式某个属性设置一个变量值

    使用方法:

    • 使用不同的class       

    :class=" {  'classA' : f,'classB':g } "    //条件f成立则使用style标签中定义好的classA样式,条件g成立则使用classB样式

    :class="[isState==true?'text':'text1']"   //isState是true样式是text,是false这是text1
    • 使用style设置某个变量的值

    :style="{'width':widthLength+'px'}"   //给width一个变量值widthLength

    • 使用计算属性calc(100% - 100px)

    一般只能计算宽度高度,注意中间的减号“-”,前后一定要加空格,并且父级的高度宽度一定要有,可以100%,否则使用无效。

    • 使用函数绑定样式:
    :style="{'color':formateTitleColor(val)}"
    //格式化标题颜色
    			formateTitleColor(val){
    				if(val<24 && val>=0){
    					return '#f7b13f'
    				}
    				if(val>=24){
    					
    					return '#000'
    				}
    				if(val<0 ){
    					return '#f5616f'
    				}
    				
    			}

    二、全局公共css样式文件

    提醒:vue工程中css文件和js文件最好都放在static文件夹下面,可以降低报错的概率。

    2.1 main.js中引入

    在入口js文件main.js文件中引入。

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUi from 'element-ui'
    import '../common/mainStyle.css'   //引入全局样式
    
    Vue.config.productionTip = false
    Vue.use(ElementUi);
    /* eslint-disable no-new */
    new Vue({
        router,
        render: h => h(App)
    }).$mount('#app');

    2.2 index.html引入

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>styletest</title>
        <link rel="stylesheet" href="./static/css/global.css"> /*引入公共样式*/
     
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    三、单个vue文件中引入样式

    vue文件style标签中import引入样式:

    @import "../assets/common/common.css";//自定义.css的样式路径

    四、样式作用范围控制

    很多时候,我们希望样式只在当前组件生效,样式可以私有化,避免影响其他的组件,造成全局的样式污染。

    4.1 scoped私有作用域

    在style标签中添加scoped属性,可以使样式只在当前的组件中生效,样式私有化。

    <style scoped>
    .example {
      color: red;
    }
    </style>

    原理

    其原理是在编译的时候,会给每个组件中的所有的dom节点样式添加一个唯一的data属性。

    4.2 混合使用

    在一个组件中同时使用scoped和非scoped样式。特别是对第三方组件样式的修改,想修改第三方组件的样式,又不想去掉scoped属性,影响别的组件。

    <style>
    /* 全局样式 */
    /* 将修改第三方组件的样式写在这里 */
    /* 组件的最外层标签定义一个唯一类,最好将样式都写在这个类名下,以防组件间互相影响 */
    </style>
    
    <style scoped>
    /* 本地样式 */
    </style>

    4.3 深度作用选择器

    如果希望scoped样式中的一个选择器能够作用的更深,例如影响子组件,可以使用 >>> 操作符。

    <style scoped>
        .a >>> .b { /* ... */ }
    </style>

    备注1:别名

    /deep/是>>>的别名

    像sass之类的预处理器无法正确解析>>>。可以使用/deep/替代

    <style scoped>
        .a /deep/ .b { /* ... */ }
    </style>

    备注2:深度选择器修改第三方组件样式

    在第三方组件内部类外面套个类,再利用深度选择器这样可以修改样式,且不影响其他组件

    <style scoped>
        外层组件类 >>> 第三方组件内部类 {
            样式
        }
    </style>

    4.4 动态生成的dom的样式

    通过v-html创建的DOM内容不受scoped样式影响,但是仍然可以通过深度作用选择器来设置样式。

    展开全文
  • 主要介绍了在VUE style中使用data中的变量的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue动态设置Style属性

    万次阅读 2020-03-19 16:28:22
    凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 对象 ...
    • 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize
    • 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff

         对象

    • html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

    • html :style="{display:(activeName=='first'?'flex':'none')}"

         数组

         html :style="[baseStyles, overridingStyles]"

         html :style="[{display:(activeName=='first'?'flex':'none')},{fontSize:'20px'}]"

        三目运算符

        html :style="{color:(index==0?conFontColor:'#ddd')}"

        html :style="[{color:(index==0?conFontColor:'#ddd')},{fontSize:'22px'}]"

       多重值

        此时,浏览器会根据运行支持情况进行选择

       html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

     

    展开全文
  • vue设置元素style 颜色样式

    千次阅读 2021-02-25 17:33:13
    本质上和普通添加style方式是一样的 <div class="number" :style="{ color: color }"> {{ $route.query.card_id ? $route.query.card_id : "" }} </div> export default { data() { return { color...

    方法1:
    项目中由于卡片背景颜色是变化的,为了美观要使卡片上文字颜色也会变;需要通过接口获取颜色值
    本质上和普通添加style方式是一样的

    <div class="number" :style="{ color: color }">
            {{ $route.query.card_id ? $route.query.card_id : "" }}
          </div>
    export default {
      data() {
        return {
          color: ""
        };
      },
      methods: {
       //方法里面请求接口部分我就不写了,下面是给颜色赋值
        this.color = obj.data.color_no_v;
    };
    

    -------------------------------------------------2020.2-26----------------------------------------------
    方法2:
    今天尝试在前端通过js来更改样式,因为我做的这页是一个卡片详情页,所以url里面会有一个id,我们通过获取到这个id对他进行判断来更改颜色。

    使用ref,给相应的元素加ref=“number” 然后再this.$refs.number获取到该元素
    注意:在获取相应元素之前,必须在mounted钩子进行挂载,否则获取到的值为空
    在这里插入图片描述在这里插入图片描述
    -------------------------------------------------2020.3-19----------------------------------------------

    今天看vue.js文档看到说直接绑定到一个样式对象通常更好,这会让模板更清晰
    html

    <div :style="styleObject"></div>
    

    js

    data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
    

    以后有其他设置元素style 颜色样式的方法也会继续在这里总结更新

    展开全文
  • Vuestyle的用法

    万次阅读 2017-09-23 23:15:15
    Vuestyle的用法总结如下: v-bind:style 简写:style 1.基本用法 .red{ color: red; } .blue{ background: blue; }
  • vue :style三目运算

    千次阅读 2020-06-23 12:11:58
    :style="{'line-height': (index == 1 ? '25px':'50px')}
  • 关于vue :style 的几种使用方式

    万次阅读 2020-11-09 18:43:30
    :style的使用 一 ,最通用的写法 1 <p:style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>   二, 三元表达式...
  • vue-style里面设置变量

    千次阅读 2019-09-25 23:27:49
    --普通style--> 1、演示HTML主体结构 <div class="header" ref="mycolor" @click="func"> <div class="header-info"></div> </div> 2、首先作用区域范围内设置“CSS变量” &...
  • VUE的class style 计算属性

    千次阅读 2019-04-18 21:27:47
    style class 为什么要绑定类名? 数据–驱动–》视图 数据–控制–》类名 -->样式 类名 要和 数据 绑定 —使用 —》 v-bind 类名的绑定方式 A: 对象的形式 <div :class = "{'size': classFlag,'bg': ...
  • Vue中Table的Render使用style

    千次阅读 2018-01-16 13:42:03
    直接在attrs中设置style项,例子: attrs:{ style:"margin-left:10px", },
  • Vue 使用v-bind:style 绑定样式

    千次阅读 2019-04-10 11:55:00
    Vue 使用v-bind:style 绑定样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script ...
  • Vue - style绑定background

    千次阅读 2019-03-05 11:19:40
    div :style="{background: 'url(' + item.home_img + ') center center', backgroundSize: '100%'}"> 注意 属性中存在'-'需要修改,如background-size需要修改成backgroundSize或者‘background-size’ 属性的...
  • vue:使用v-for写入:style中图片做背景

    千次阅读 2018-09-30 15:04:36
    &lt;div class="honor_row" v-for="(item,i) in points.awardList" :key='i'&... :style="{'background': 'url('+imgDomain+item.filePhysPath+') no-repeat center ce...
  • Vuestyle样式的绑定注意点

    千次阅读 2018-09-19 19:51:29
    图中的fontSzie中不应写成font-size,因为这个样式由js控制
  • Vue 设置style样式

    千次阅读 2020-04-28 11:00:21
    2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样式--> <p style="background-color: blue;">sssss</p> <...
  • 一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别 简介 用过 vue-cli 脚手架搭建 vue 项目都知道,vue-cli 中内置了 vue-style-loader 去加载样式模块,最后通过 <style> 标签把样式加载到...
  • vue style样式设置方式

    千次阅读 2019-10-22 16:01:06
    <style> .red { color: red; } .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </styl...
  • Vue操作Style

    千次阅读 2019-04-27 21:00:43
    Vue操作Style <script> window.onload = function () { var vm = new Vue({ el:'.box', data:{ style01:{ color:'red', ...
  • vue 动态style 拼接宽度

    千次阅读 2020-11-27 17:21:00
    大众用法: :style=" { width:30px } " 拼接宽度以及其他
  • vue如何动态的绑定style样式

    千次阅读 2020-07-08 12:06:10
    span v-else class="nvwa-iconfont" :style="{'color':cNodeColor,'font-size': '14px'}" :class="row.flag === 1 ? 'icon-_Txiaoxitishi':'icon-_Tchenggongtishi'"> </span> // :style="{'color':row....
  • vue中动态绑定style

    千次阅读 2019-01-02 15:54:24
    <style> .ng { color: red; } </style> <script src="js/vue.js"> <div :style='styleMsg'> 你好 var app=new Vue({ el: '#app', data: { styleMsg:{ color:'red', textShadow:'0 0 5px ...
  • vue - style绑定行内样式

    千次阅读 2019-12-08 21:45:31
    前言   ... vue中行内样式绑定采用驼峰写法 // 写法一: :style="{ backgroundImage: 'url(' + 变量name + ')' // 写法二: :style="{ backgroundImage: `url{ ${变量name} }` }" ...
  • v-bind:style 的对象语法十分直观,CSS属性名可以用 驼峰式 (camelCase) 或 短横线分隔 (kebab-case,记得用引号括起来) 来命名: <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">&...
  • Vue中给style绑定动态值

    千次阅读 2020-09-22 10:22:17
    以绑定style高度为例,高度为当前屏幕的高度 1、定义style <div :style="{width: '100%',height: screenHeight,border: '1px solid rebeccapurple', color: 'red', display: 'flex'}"> </div> 2、获取...
  • vue style样式失效

    千次阅读 2020-04-26 16:41:58
    在开发vue项目时,style样式突然失效 原因:使用v-if指令,里面的条件是list.length,因为使用是scoped样式属性,标签中都会添加一个data-v-6a72702f的属性,当页面创建时list.leng最初是0,所以标签没有被添加data-v...
  • style width 这个问题 折磨了我一个上午了 好惭愧因为项目涉及到 进度条 所以必须用行内样式 style用过vue的都知道 vuestyle的用法大众用法:style=" { width:30px } "但是现在涉及到拼接了 直接上代码了其中list...
  • vue中给body单独设置样式

    千次阅读 2020-06-10 11:31:13
    vue项目中,有时候会需要给单独的页面中的body设置样式,下面是两种方法 1.在beforeCreate()中给body添加属性 beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#...
  • vue :style 动态绑定样式

    千次阅读 2020-07-18 19:48:41
    div class="right userPicture" :style="[{'background':`url(${userImg}) no-repeat center`},{'background-size': 'cover'}]"></div> <el-button :style="[{'background-color':`${scope.row.颜色}`}...
  • li :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li> 2. 在css中设置background-image时,使用相对路径在webpack打包后出现问题,图片路径到了sta...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 217,730
精华内容 87,092
关键字:

stylevue

vue 订阅