7.Vue 样式绑定

程序员文章站 2022-06-06 21:28:50

...

一.v-bind:class

1.class 属性绑定

我们可以为 v-bind:class 设置一个对象，从而动态的控制 class

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}        //定义一个长宽各100的方框，背景色为绿色
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ 'active': isActive }"></div>   //通过data中的isActive的值来控制方框是否显示
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

2.也定义一个static变量

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
     v-bind:class="{ 'active': isActive, 'text-danger': hasError }">   //通过data中的两个值来显示颜色
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})
</script>

3.也可以直接绑定数据里的一个对象

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="isActive"></div>      //和第一个例子类似，不过这个isActive是一个变量，相当于python中的字典
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: {
      active: true,
      'text-danger': true
    }
  }
})
</script>

4.我们也可以在这里绑定返回对象的计算属性
类比于python就是使用计算后返回的值进行控制

<style>
.base {
  width: 100px;
  height: 100px;
}

.active {
  background: green;
}

.text-danger {
  background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="class_a"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    class_a: function () {
      return {
  		base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})
</script>

5.可以把一个数组传给 v-bind:class

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[activeClass, errorClass]"></div>    //把css定义的两个变量以数组的形式传过来
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',              //把css定义的active赋值给一个变量，方便div中使用
    errorClass: 'text-danger'            //把css定义的text-danger赋值给一个变量，方便div中使用
  }
})
</script>

6.可以使用三元表达式来切换列表中的 class

<style>
.text-danger {
	width: 100px;
	height: 100px;
	background: red;
}
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>     //三元表达式如果isActive为真，则取activeClass的值，反之，则取冒号后面的空值‘’
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

二.v-bind:style

1.可以在 v-bind:style 直接设置样式

<div id="app">
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">vue教程</div> //颜色为绿色，字号为30的显示
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})
</script>

2.也可以直接绑定到一个样式对象

<div id="app">
  <div v-bind:style="a_style">菜鸟教程</div>  //直接取a_stytle的值，这个和python有点不一样，但和7类似，异曲同工之妙
</div>

<script>
new Vue({
  el: '#app',
  data: {
    a_style: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>

3.v-bind:style 可以使用数组将多个样式对象应用到一个元素上

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">vue教程</div>  //运用数组传两个对象到stytle中
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>

7.Vue 样式绑定

一.v-bind:class

二.v-bind:style

php怎样把数据库数据循环绑定到一个八行四列的表格里面去呢，知道的老师请说一下思路，谢谢

如何使用jQuery更改CSS样式

详解Java多态对象的类型转换与动态绑定

详解Bootstrap的纯CSS3箭头按钮样式

MySQL提供与Linux绑定的数据库下载_MySQL

jQuery中关于live绑定多个事件整理的详解

Css样式兼容IE6,IE7,FIREFOX的写法_html/css_WEB-ITnose

4.1 段落样式概述 4.2 下划线、删除线和顶划线text-decoration

jquery如何使用undelegate去掉用delegate为动态创建元素绑定的事件？

CSS滚动条样式如何兼容IE8和Chrome浏览器？