Vue.js 样式绑定
程序员文章站
2022-06-27 20:32:20
Vue.js 样式绑定 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 可以为 v-bind:class 设置一个对象，从而动态的切换 class:
vue.js 样式绑定
vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
可以为 v-bind:class 设置一个对象，从而动态的切换 class:
<template>
<div id="app">
<p v-bind:class="{active:isactive}">this is a text</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
isactive:true
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
</style>
可以在对象中传入更多属性用来动态切换多个 class 。
<template>
<div id="app">
<p v-bind:class="{active:isactive,'light-bg':lightbg}">this is a text</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
isactive:true,
lightbg:true
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
也可以直接绑定数据里的一个对象：
<template>
<div id="app">
<p v-bind:class="classobj">this is a text</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
classobj:{
active:true,
'light-bg':true
}
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
可以把一个数组传给 v-bind:class ，实例如下：
<template>
<div id="app">
<p v-bind:class="[activecls,bgcls]">this is a text</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
activecls:'active',
bgcls:'light-bg'
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
可以使用三元表达式来切换列表中的 class ：
<template>
<div id="app">
<p v-bind:class="isactive?'active':''">this is a text</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
isactive:true
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
可以在 v-bind:style 直接设置样式：
<template>
<div id="app">
<p v-bind:style="{color:mycolor,fontsize:myfontsize+'px'}">this is a text</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
mycolor:'orange',
myfontsize:14
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
也可以直接绑定到一个样式对象，让模板更清晰：
<template>
<div id="app">
<p v-bind:style="classobj">this is a text</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
classobj:{
color:'lightblue',
fontsize:'16px'
}
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
注意：当 v-bind:style 使用需要特定前缀的 css 属性时，如 transform ，vue.js 会自动侦测并添加相应的前缀。
- 1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"
- 2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id
- 3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。
动态调节样式
<template>
<div id="app">
<button v-on:click="fontsize--">small</button>
<button v-on:click="fontsize++">big</button>
<p :style="{color:color,fontsize:fontsize+'px'}">this is a text</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
fontsize:16,
color:'orange'
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
动态调节需要注意，以下两种情况：
<template>
<div id="app">
<button v-on:click="fontsize--">small</button>
<button v-on:click="fontsize++">big</button>
<!-- 可以动态调节 -->
<p :style="{color:color,fontsize:fontsize+'px'}">this is a text can change</p>
<!-- 不可以动态调节 -->
<p :style="objectstyle">this is a text cannot change</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
fontsize:16,
color:'orange',
objectstyle:{
fontsize:this.fontsize+'px',
color:this.color,
}
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
正确的打开方式：动态调节需要注意在 data 里面调用 data 的数据是 undefined 的，正确的使用方法是使用 computed。（使用 methods 返回无效，可能是不支持这样的设置）
<template>
<div id="app">
<button v-on:click="fontsize--">small</button>
<button v-on:click="fontsize++">big</button>
<!-- 可以动态调节 -->
<p :style="{color:color,fontsize:fontsize+'px'}">this is a text can change</p>
<!-- 不可以动态调节 -->
<p :style="objectstyle">this is a text cannot change</p>
<!-- 可以动态调节 -->
<p :style="methodsstyle()">this is a text can change</p>
<!-- 可以动态调节 -->
<p :style="computedstyle">this is a text can change</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
fontsize:16,
color:'orange',
objectstyle:{
fontsize:this.fontsize+'px',
color:this.color,
},
}
},
methods:{
methodsstyle(){
return {fontsize:this.fontsize+'px',color:this.color};
}
},
computed:{
computedstyle(){
return {fontsize:this.fontsize+'px',color:this.color};
}
},
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>
加一个 watch 方法，objectstyle 的方式也能实现动态变化。
<template>
<div id="app">
<button v-on:click="fontsize--">small</button>
<button v-on:click="fontsize++">big</button>
<!-- 可以动态调节 -->
<p :style="{color:color,fontsize:fontsize+'px'}">this is a text can change</p>
<!-- 不可以动态调节 -->
<p :style="objectstyle">this is a text cannot change</p>
<!-- 可以动态调节 -->
<p :style="methodsstyle()">this is a text can change</p>
<!-- 可以动态调节 -->
<p :style="computedstyle">this is a text can change</p>
</div>
</template>
<script>
var count=1;
export default {
name: 'app',
data(){
return{
fontsize:16,
color:'orange',
objectstyle:{
fontsize:this.fontsize+'px',
color:this.color,
},
}
},
methods:{
methodsstyle(){
return {fontsize:this.fontsize+'px',color:this.color};
}
},
computed:{
computedstyle(){
return {fontsize:this.fontsize+'px',color:this.color};
}
},
watch:{
fontsize(fontsize){
this.objectstyle.fontsize=fontsize+'px';
}
}
}
</script>
<style scoped>
.active{
color:pink;
}
.light-bg{
background:lightgreen;
}
</style>