vue的!class和!style


:style 总结:

写 inline style 的方法跟 class 大同小异,一样可以使用阵列及物件语法,但在给css 属性时要注意有些以**-**连结的词,要改为驼峰式写法,或者是使用单引号括起来

一. 对象语法

<div id="app">
   <!--单个属性-->
   
  <div v-bind:style="{ color: activeColor}">color:{{activeColor}}</div>
   <!--驼峰写法-->
   
  <div v-bind:style="{'text-align':textAlign,fontSize: fontSize + 'px'}">
    text-align:{{textAlign}},fontSize:{{fontSize}}px
  </div>
   <!--一个对象-->
   
  <div v-bind:style="styleObject">{{styleObject}}</div>
</div>

二. 数组语法

<div id="app">
   <!--整个数组-->
   
  <div v-bind:style="[baseStyles, overridingStyles]">
    {{[baseStyles, overridingStyles]}}
  </div>
   <!--数组+三元表达式-->
   
  <div v-bind:style="[{backgroundColor:isActive ? '#f00' : '#00f'},baseStyles]">
    如果isActive==true,背景红色
  </div>
   <!--对象+数组-->
   
  <div v-bind:style="[{ baseStyles: Active }, overridingStyles]">
    {{[{ baseStyles: Active }, overridingStyles]}}
  </div>
</div>

三. :style 动态背景

<div @click="istrue=!istrue" :style="{'height':'200px','width':'100px','background-size':'100%,100%','background-repeat':'no-repeat','background-image':`url(${istrue?'../../../static/1.png':'../../../static/2.png'})`}"> </div>

data:{
    istrue:false
}

:class 总结

<style>
  .red{color:red;}
  .blue{background-color:blue;}
</style>

方法一:单体写法

<div :class="classA">Demo2</div>
data: {
  classA: 'class-a'  //当classA改变时将更新class
}

方法二:对象语法

//1.单或多对象写法
    :class="{red:isred,blue:isbule}"
  data:{
        isred:true,
      isblue:false
   }

//2.json对象
 :class="json"
 data:{  //把属性都放在一个对象里面
   json:{
        red:false,
     blue:true
   }
  }

方法三:数组语法

//1.整个数组
    :class="[reds,blues]">
  data:{
    reds:"red",   //此处的red和blue指的是style中的red类和blue类
   blues:"blue"
  }
 
//2.对象+数组
    :class="[classA, classB]"
  data:{
    classA: 'class-a',
          objectClass: {
            classB: 'class-b',  // classB 的值为class-b, 则将classB的值添加到class列表
                classC: false,    // classC值为false,将不添加classC
            classD: true    // classD 值为true,classC将被直接添加到class列表
             }
   }
     //渲染后: class="class-a class-b classD"

//3.数组+三元表达式
1>
 :class="[isActive ? activeClass : '', errorClass]"
 data: {
   isActive: true,
   activeClass: 'active',
   errorClass: 'text-danger'
 }

2>
 <el-button  :class="['uploadclass',status === 'view'? 'uploadClass-no':'uploadClass-hover']" :disabled="status === 'view'"> </el-button>

方法四:利用 computed 的计算属性

    :class="classObject"
     data: {
          isActive: true,
          error: null
        },
        computed: {
             classObject () {
                return {
                      active: this.isActive && !this.error,
                      text-danger': this.error && this.error.type === 'fatal'
                    }
           }
        }

总结:

总体而言,:class 和:style 语法基本相似,但是需要注意的是css 属性时要注意有些以**-**连结的词,要改为驼峰式写法,或者是使用单引号括起来。


文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论
 上一篇
Tomcat下部署vue项目[history模式] Tomcat下部署vue项目[history模式]
1.项目发布后通常有两种访问方式,第一种: IP+端口直接访问的方式,如 http://192.168.1.107:8080/第二种:IP+端口+项目名,如 http://192.168.1.107:8080/saas/ 2.第一种方式:i
2019-10-20
下一篇 
给文件添加一个.gitignore 给文件添加一个.gitignore
1.WHY?.gitignore 文件只要在这个文件中申明那些文件你不希望添加到 git 中去,这样当你使用git add .这些文件就会被自动忽略掉 2.忽略文件的原则 忽略操作系统自动生成的文件,比如缩略图等; 忽略编译生成的中间文件、
2019-07-05
  目录