2021-06-09 Vue的样式绑定

Vue的样式绑定

1.Boolean值切换

<div id="app">
	<div @click="handleClick"
		:class=" { activted: isActivated } "
	>
	Hello
	</div>
</div>
<script>
	var vm = new Vue({
        el: '#app',
        data: {
            isActivated: false
        },
        methods: {
            handleClick() {
                this.isActivated = !this.isActivated;
            }
        }
    })
</script>

2.三元表达式

<div
	:style="{
		backgroundColor: menuStatus ? '#dddddd' : '#272727'
	}"     
>
</div>

综合写法

<div
     class="cover_wrap"
     :class=" touch ? '' : 'cover_wrap_tran' "
     :style="{
             transform:
             'rotateX(' + Math.abs(rotateX) + 'deg) rotateY(' + -Math.abs(rotateX) / 2 + 'deg) scale('+ (1 - Math.abs(rotateX)/50) +')',
             }"
     >
</div>

<div
	:style="{
    	filter: 'blur(' + (blurStatus ? '1rem' : '0') + ')',
    }"
>
</div>

多个CLASS

<div 
     class="page-container" 
     :class="[content.wrapClass ? content.wrapClass : '']" 
     :style="{ backgroundColor: content.backgroundColor }"
>
</div>

<div id="app">
	<div @click="handleClick"
		:class=" [ activted, otherClass] "
	>
	Hello
	</div>
</div>
<script>
	var vm = new Vue({
        el: '#app',
        data: {
            activted: '',
            otherClass: 'div-class'
        },
        methods: {
            handleClick() {
                this.activted = this.activted === 'actived' ? '' : 'actived';
            }
        }
    })
    // activted, otherClass 如有相同样式, 前一个会被后一个覆盖
</script>

样式对象styleObj

<div id="app">
	<div @click="handleClick"
		:style="styleObj"
	>
		Hello
	</div>
</div>
<script>
	var vm = new Vue({
        el: '#app',
        data: {
            styleObj: {
            	color: 'red'
            }
        },
        methods: {
            handleClick() {
                this.styleObj.color	= this.styleObj.color === 'red' ? 'black' : 'red';
            }
        }
    })
</script>

样式数组

<div id="app">
	<div @click="handleClick"
		:style="[styleObj, styleObj1, {fontSize: '20px'}]"
	>
		Hello
	</div>
</div>
<script>
	var vm = new Vue({
        el: '#app',
        data: {
            styleObj: {
            	color: 'red'
            },
            styleObj1: {
            	fontWeight: 600
            }
        },
        methods: {
            handleClick() {
                this.styleObj.color	= this.styleObj.color === 'red' ? 'black' : 'red';
            }
        }
    })
</script>