Vue入门之数据绑定(小结)(3)

日期：2020-05-11 栏目：程序人生浏览：次

经常我们需要对样式进行切换，比如：div的显示和隐藏，某些标签active等。Vue提供的对象绑定样式的方式就很容做这些事情。

代码：

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

解释：当 isActive为 true时， div就会具有了active样式类，如果 isActive为false，那么div就去掉active样式类。

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之绑定样式类</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <style>
 .active {
  background-color: #ccc;
 }
 </style>
</head>
<body>
 <div id="app">
  <div v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }">
   绑定颜色类
  </div>
 </div>
 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          // data: 是Vue对象中绑定的数据
    MenuContaineId: 'menu',
    isActive: true
   }
  });
 </script>
</body>
</html>

7.2. 混合普通的HTML标签样式类及绑定样式对象

v-bind:class 指令可以与普通的 class 属性共存。

<div id="app">
 <div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
 </div>
</div>
<script>
 var app = new Vue({     
  el: '#app',        
  data: {          // data: 是Vue对象中绑定的数据
   isActive: true,
   hasError: false
  }
 });
</script>

结果：

<div id="app">
 <div class="static active">
 </div> 
</div>

7.3. 绑定data中的样式对象

直接在html属性中的双引号内写对象，还是很不爽，也没有智能提示，很容易写错。 Vue可以让我们直接把绑定的class字符串指向data的一个对象，这样就非常方便了，既可以有智能提示，又可以很复杂进行编辑，不用担心烦人的""了。

<div id="app">
 <div class="static"
   v-bind:class="classObject">
 </div>
</div>
<script>
 var app = new Vue({     
  el: '#app',        
  data: {
   classObject: {
    active: true,
    'text-danger': false
   }
  }
 });
</script>

结果：

<div id="app">
 <div class="static active">
 </div>
</div>

7.4. 绑定样式数组

其实绑定数组，就是绑定样式对象的延续，看官网的例子代码吧。

<div v-bind:class="[activeClass, errorClass]">

data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

转载注明出处：http://www.heiqu.com/221.html

Vue入门之数据绑定(小结)(3)

相关推荐