直播app开发，Vue动态设置样式和class名

直播app开发，Vue动态设置样式和class名

一、动态设置样式

 

<template>
<div :style="{backgroundImage: 'url(' + bgimg + ')', fontSize:'size'}"></div>
</template>
<script>
    export default {
        data() {
            return {
            bgimg: "https://jm-images.oss-cn-beijing.aliyuncs.com/63563B1E3B7A2F2B/3d5ef88081e49a4450cd476572d514b2.jpeg",
                size: "10px",
            }
        },
        created() {
            
        },
        methods: {
            
        },
    }
</script> 

​

注：我们在使用中间带“-”的样式的时候要把“-”去掉，第二个单词的首字母大写。例：fontSize、marginTop、paddingTop等。

 

二、动态设置Class

 

<template>
  <div>
    <!-- 第一种:对象（对象的形式可以写多个，用逗号分开） -->
    <!-- 第一个参数 类名， 第二个参数：boolean值 -->
    <div :class="{'div1' : true}">对象</div>
    
    <!-- 第二种:三元表达式 -->
    <div :class="[ big < small ? 'div1' : 'div2' ]" >三元表示式</div>
    
    <!-- 第三种: 数组 -->
    <div :class="[{'div1': true}, isDiv]">数组</div>
 
 <!--注: class中还可以传方法，在方法中返回类名-->
 <div :class="setClass">通过方法设置class类名</div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
            big: 10,
            small: 1,
            isDiv: "div2",
            }
        },
        created() {
            
        },
        methods: {
            setClass () {
    return 'div1';
    }
        },
    }
</script>

 

 以上就是直播app开发，Vue动态设置样式和class名， 更多内容欢迎关注之后的文章