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

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

一、动态设置样式

 

1

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

​

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

 

二、动态设置Class

 

1

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

 

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