vue构建的七彩外衣

关注

原创最新推荐文章于 2026-11-10 20:24:06 发布 481 阅读 AI 写同款· GEO 优化 ›

VueCircleMenu一个利用Vuejs实现的漂亮圆形菜单 VueCircleMenu 一个利用Vue.js实现的漂亮圆形菜单立即下载

继第一章的vue入门http://blog.youkuaiyun.com/jerryjavacoding/article/details/77985464，接着学习的是vue在前端另一个重要领域：样式。传统基于dom的样式都是通过绑定class或者id来进行渲染，当我们需要根据业务动态修改样式的时候，很多时候只能依赖脚本去做逻辑替换，这个比较繁琐也容易出错。而vue通过其自身的数据双向绑定特性，应用于样式上，我们就可以根据这个来改变元素上的样式，简单易懂，非常方便。

Class 与 Style 绑定

Style
vue中要动态跟换元素的样式，使用class的话，就是将元素的Style特性与一个数据源对象进行绑定，这个数据源的key都是一些css文件中样式名称，如color，display等。比如

 <a :style="classObj" href="xxx"/>
<script>
...
 vue.data(){
    return{
        classObj:{          
                color:blue,
                display:none,   
        }
    }
}
</script>

这样我们就将a的“外衣”牢牢的与classObj对象绑定在一起，当我们需要更改样式的时候，只要修改classObj对应属性就可以了，元素a的样式就会实时更新。
这里我们注意到style绑定的是一个对象，而这个对象可以有众多的属性，所以一般一个对象就能应付上很多样式需求了，但是如果我们定义的style绑定对象要可以复用到其他元素上，或者需要一些公用的属性，每次都手动添加一份就显得不灵活且繁琐，这是style绑定的对象可以是一个数组，而数组中的对象就是上文中普通的数据源，比如

 <a :style="[classObj,publicObj]" href="xxx"/>
<script>
...
 vue.data(){
    return{
        publicObj:{
            color:blue,
        },
        classObj:{                      
            display:none,   
        }
    }
}
</script>

如今我们看到都是key-value的形式，一个键只有一个值，vue新版2.3中增加了一个称谓“多重值”的概念，就是一个键可以有多个不同的值，那浏览器到底会采用哪个值呢？嘿嘿这还真是浏览器的事情了，不同浏览器引擎不同，我们将所有情况都罗列一般，主要就是为了兼容不同浏览器，如果都支持的话，就会取最后一个。

Class

class其实与上文的style类似，也有分数组和对象两种语法，还有数据与对象的结合。
这里的class跟style有啥不同？为什么会单独分出来？
style一般是我们自己定义的，k-v的v有n中可能，但是class只有两种可能，true or false

<div :class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

对嘛，我们选择class对象是，要么采用要么不要。这个要严格区分与style的不同。上文提到这里也可以是数组，如

<div :class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

数组语法，显示了的，当然是true了，没显示就是false，下面这种是对象语法与数组语法的结合体：

<div :class="[{ active: isActive }, errorClass]"></div>

这里还要强调一点是我踩过的坑，当我们的class作用在自定义的组件上时，如

ChildModal.vue:
    <template>
        <p class="classObj">Hello World!</p>
        ...
    </template>

Parent.vue:
    <ChildModal class="classObjParent"></ChildModal>

组件的父组件渲染的时候会将classObj也带到组件上来，而例子中我们看到父组件上已经定义了classObjParent了，这时候子组件定义的class就会追加在后面，而不是覆盖！

渲染

对于html元素的渲染，一般都会跟vue提供的指令挂钩

首先比较经典的就是v-if和v-show的区别，很多人知道v-if是根据属性然后选择性渲染，而show是全部渲染，然后依托display来显示和影藏。道理都懂，可以官方为什么这么费劲去搞出两套东西？那要根据其应用场景才能知道vue的意图。
if的切换开销大，适用于页面不经常切换，改变的条件一般不太可能，而show是渲染的开销大，适用于页面经常切换
不过show不能用于template元素，这个元素渲染后是不存在的，那么display就无意义了，只能通过if。
条件渲染中，如下面的例子（下面这个也不能用show，因为show不支持v-else）

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

key管理可复用的元素
当我们根据loginType切换不同的页面的时候，会发现两个template其实里面的input是同一个，这样对于要切换来回的业务需求就不合理了，vue的解决方法就是通过给input添加key值，来区分他们。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-for与v-if
两者同时存在的时候，for的优先级更高。当我们需要for遍历数组然后通过if来筛选的话，在一个元素上，两个可以同时存在，原因就是for优先级高，但是当我们要根据if判断后再来用for去遍历数组，这个显然就不对了，只能在元素的外层去使用if了
上文提到了v-for，很多人对于for指令的只是了解item in items，其实还有很多，比如
```
 item of items 
(item,index) in items
```
for除了可以遍历数组，还能遍历对象，
```
 value in Object
(value,key)  in object
(value,key,index) in object
```
for遍历如果是对象，对象的数据变动并不能触发到for去更改，只能通过vue实例的$set函数对象去修改，如果是数组，有以下情况，也不能更新，要跟对象一样处理：
```
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue                   当你修改数组的长度时，例如：vm.items.length = newLength
```

注：本文例子部分引用官网

收录于