直播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名， 更多内容欢迎关注之后的文章

最后

以上就是疯狂发卡为你收集整理的直播app开发，Vue动态设置样式和class名的全部内容，希望文章能够帮你解决直播app开发，Vue动态设置样式和class名所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。