VUE学习-:class & :style

:class & :style

:class

键值对

<div id="app" v-bind:class="{ 'active': isActive }"></div>

<script>

new Vue({

	el:'#app',

	data:{isActive:true}

})

</script>

对象

<div id="app" v-bind:class="classObj"></div>

<script>

new Vue({

	el:'#app',

	data:{

		classObj:{active:true}

	}

})

</script>

计算属性

<div id="app" v-bind:class="classObj"></div>

<script>

new Vue({

	el:'#app',

	computed:{

		classObject(){

			return {active:true}

		}

	}

})

</script>

数组

<div id="app" v-bind:class="[activeClass, errClass]"></div>

<script>

new Vue({

	el:'#app',

	data:{

		activeClass:'active',

		errClass: 'text-danger'

	}

})

</script>

数组+对象

<div id="app" v-bind:class="[{'active':isActive}, errClass]"></div>

<script>

new Vue({

	el:'#app',

	data:{

		isActive:true,

		errClass: 'text-danger'

	}

})

</script>

:style

特点：

自动添加前缀。当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
多重值。为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值。这样写只会渲染数组中最后一个被浏览器支持的值。

值

对象

<div id="app" v-bind:style="{ color: activeColor }"></div>

<script>

new Vue({

	el:'#app',

	data:{activeColor:red}

})

</script>

数组

<div id="app" v-bind:style="[base,read]"></div>

<script>

new Vue({

	el:'#app',

	data:{

		base:{color:blue},

		read:{color:purple}

	}

})

</script>

巴特西

VUE学习-:class & :style

:class & :style

:class

:style

特点：

值

最新文章

热门文章