class与style绑定

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?

• 项目中解决的问题

使用v-bind指令绑定class和style

• 做题思路

给v-bind:class设置一个对象，可以动态地切换class，在Directive.vue组件中完成

 <template>
<div class="page">
<a v-bind:href="url">链接</a>
<!--v-bind可以省略，缩写为 -->
<br>
<a :href="url">链接</a>
<div :class="{ active: isActive }">对象语法</div>
</div>
</template>
<script>
export default {
data() {
return {
url: "https://github.com",
isActive: true
};
}
};
</script>
<style scoped>
.active{
border: 1px solid #000;
}
</style>

在浏览器中运行，显示效果

类名active依赖于数据isActive，当其为true时，div会拥有类名active的样式，为false时，则没有，所以“对象语法”存在1px的黑色边框。
对象中也可以传入多个属性来动态切换 class。特别强调一点，动态绑定的 class 可以与普通的class共存，

<template>
<div class="page">
<!-- 省略部分代码 -->
<div :class="{ active: isActive }">对象语法</div>
<div class="static" :class="{ active: isActive, danger: hasError }">多个属性的对象语法</div>
</div>
</template>
<script>
export default {
data() {
return {
url: "https://github.com",
isActive: true,
hasError:false
};
}
};
</script>
<style scoped>
.static {
margin: 5px 0;
font-size: 20px;
}
.active{
border: 1px solid #000;
}
.danger {
background: #ff0;
}
</style>

:class内的表达式某项为真时，对应的类名就会加载，示例8渲染后的结果为：

<div class="static active">多个属性的对象语法</div>

当数据isActive或hasError变化时，对应的class类型也会更新，比如hasError为true时，渲染后的结果为：

<div class="static active danger">多个属性的对象语法</div>

• 绑定内联样式

使用 v-bind:style（即:style）可以给元素绑定内联样式，方法与:class 类似。也存在对象语法和数组语法，看起来很像在元素上直接写CSS。
在components文件夹下新建BindStyle.vue组件，写入如下示例所示代码，并在路由index.js中进行配置。

<template>
<div class="page">
<div :style="{border: activeColor, fontSize: fontSize + 'px'}">绑定内联样式</div>
</div>
</template>
<script>
export default {
data() {
return {
activeColor: "1px solid #000",
fontSize: 22
};
}
};
</script>
<style scoped>
</style>

CSS属性命名使用驼峰命名法或短横分割法，示例渲染后的结果为：

<div :style="border: 1px solid rgb(0, 0, 0); font-size: 22px;">绑定内联样式</div>

大多数情况下，直接写一长串的样式不便于阅读和维护，因此实际的开发中往往是写在data或者computed计算属性里。

<template>
<div class="page">
<div:style="styles">绑定内联样式</div>
</div>
</template>
<script>
export default{
data(){
return{
styles:{
border:'1px solid#000',
fontSize:22+'px'
}
};
}
};
</script>
<style scoped>
</style>

• 总结
  指令（Directive）是特殊的带有“v-”前缀的命令，其作用是当表达式的值改变时，将某些行为应用到DOM上。举一个简单的例子，单击某一个按钮，会显示div，再次单击div隐藏，这里就可以通过设置属性的真假，将指令作用到div上来控制显示或隐藏。
  为什么要使用指令呢？最重要的原因是使用指令可以简化操作，可以更加方便地完成一些业务代码。例如之前传统开发中的条件判断，一定要写到JavaScript中才能完成，但是现在使用指令就可以完成。
  Vue.js指令的书写位置可以是在任意HTML元素的开始标签内，可以写入多个指令，多个指令间使用空格分隔。例如给a标签添加两个指令，分别为v-bind指令和v-on指令。

<a href="#"v-bind:class="{active:timeflag}"v-on:click="queryAll('time')">全部</a>