Vue动态样式你不会吗

Posted 浪漫主义码农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue动态样式你不会吗相关的知识,希望对你有一定的参考价值。

Vue动态样式

背景:在我们的前端界面中,很多的地方的样式都是不确定的状态,要根据其他内容的变化而变化样式的。本文总结一下自己用到的动态样式方法。

一、动态绑定 :style

👉1.使用对象方式

通过v-bind:style来绑定style样式,“”引号里面使用对象的方式,为key,value形式,key值为css属性名,注意的是例如font-size,在key中要写成fontSize驼峰命名规则。value就是我们绑定的值,可以动态去改变。

<h1 :style=" color: Color ,fontSize:size+'px'">浪漫主义码农</h1>

例子:

代码:

<template>
  <div>
    <h1 :style=" color: Color ,fontSize:size+'px'">浪漫主义码农</h1>
    <div class="btn">
      <el-button type="primary" @click="changeColor">点击切换颜色</el-button>
      <el-button type="primary" @click="Change_size">字体变大</el-button>
    </div>
  </div>
</template>
<script>
export default 
  data() 
    return 
      Color:'blue',
      size:14
    ;
  ,
  methods:
      changeColor()
          this.Color='red'
      ,
      Change_size()
          this.size++
      
  
;
</script>

也可以将所有的属性全部写在一个对象里面,最后在:style绑定这个对象就行,简化页面代码

例如:

<template>
  <div>
    <h1 :style="myStyle">浪漫主义码农</h1>
  </div>
</template>
<script>
export default 
  data() 
    return 
      myStyle: 
        fontSize: 40 + "px",
        color: "red",
      ,
    ;
  ,
;
</script>

👉2.使用三目表达式

通过布尔表达式来判断value值应该为什么,ifcolor为表达式,并使用圆括号将三目表达式包起来

<h1 :style=" color:(ifcolor?'red':'blue')">浪漫主义码农</h1>

👉3.使用数组方式

:style="[样式对象1,样式对象2,…]"

可以将多组样式对象应用到同一个元素上,但是如果有css属性相同,则后面的样式会覆盖前面的。

例子:

<template>
  <div>
    <h1 :style="[styles1,styles2]">浪漫主义码农</h1>
  </div>
</template>
<script>
export default 
  data() 
    return 
      styles1: 
        backgroundColor: "red",
        "width": "300px",
      ,
      styles2: 
        color: "#fff",
        height: "300px",
      
    ;
  ,
;
</script>

二、动态绑定 :class

使用v-bind:class

👉1. 使用对象方法

:class="类名1:布尔值1,类名2:布尔值2" 当布尔值为true整个类生效,否则就不生效,class和:class并不冲突,因为class可以是很多个。写法也是相对的自由

例子:

<template>
  <div>
    <p class="class1" :class="class2:ifcolor,class3:true">浪漫主义码农</p>
  </div>
</template>
<script>
export default 
  data() 
    return 
        ifcolor:false,
    
  ,
;
</script>

<style>
div
  margin-left: 100px;


.class1
    background: #E6A23C;
    width: 100px;
    height: 100px;


.class2
    color: red;

.class3
    font-size: 30px;
    font-weight: 1000;

</style>

👉2. 使用三目表达式

我们使用三目运算符能够更加的灵活的,并简化对象方法的写法,,对象的写法我们需要一个变量去控制每一个类,使用三目运算符可以简化一点,我最常使用的是种形式。

:class="布尔值 ? '类1' : '类2'"

例子:

<template>
  <div>
    <h1 :class="ifcolor ? 'Red' : 'Pink'">“浪漫至死不渝,温柔绝对屈服”</h1>
  </div>
</template>
<script>
export default 
  data() 
    return 
      ifcolor: false,
    ;
  ,
  mounted() 
    setInterval(() => 
      this.ifcolor = !this.ifcolor;
    , 1000);
  ,
;
</script>

<style>
div 
  margin-left: 200px;
  margin-top: 200px;

.Red 
  font-size: 20px;
  color: red;
  animation: big 1s;

.Pink 
  font-size: 20px;
  color: pink;
  animation: small 1s;

@keyframes big 
  0% 
    font-size: 20px;
  
  100%
      font-size: 30px;
  

@keyframes small 
  0% 
    font-size: 30px;
  
  100%
      font-size: 20px;
  

</style>

👉2. 使用数组方法

和上面的style一样的使用

:class="[class1, class2]"

例子:

代码:

<template>
  <div>
      <p :class="[classA,classB,classC]">今天毕业拍毕业照了</p>
  </div>
</template>

<script>
export default 
    data()
        return
            classA:'one',
            classB:'two three',
            classC:'five'
        
    

</script>

<style>
div
    margin-left: 200px;
    margin-top: 200px;

.one
    background: pink;

.two
    font-size: 30px;

.three
    color: red;

.five::after
    content: ",青春再见";

</style>

写在最后

要是有误的地方,欢迎大佬们评论指出。

今天我们拍了毕业照。离别总是伤感的。我们和学校说再见,却不跟青春道别。

💌 我们从五湖四海来,到天南海北去。

💌 愿你以梦为马,永远随处可栖。

一个心怀浪漫宇宙,也珍惜人间日常的码农

以上是关于Vue动态样式你不会吗的主要内容,如果未能解决你的问题,请参考以下文章

Vue动态样式你不会吗

Vue动态样式你不会吗

vue 中内样式动态绑定的 坑!!

HTML JS动态设置CSS样式

05《Vue 入门教程》Vue 动态样式绑定

WebStorm、React 和 JSX 花括号自动完成