当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue.js 样式绑定

Vue.js 样式绑定

2020年04月21日  | 移动技术网IT编程  | 我要评论

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网