【Vue学习总结】5.Vue绑定属性、Html、class、style

接上篇《​​4.绑定数据和对象、循环数组渲染数据​​》

上一篇我们主要讲解了Vue的基础语法，绑定数据、对象，以及如何循环数组和渲染数据，本篇我们主要来介绍Vue属性、Html、class以及style的操作。
本系列博文使用的Vue版本：2.6.11

一、绑定属性

上一篇我们讲解了Vue如何绑定数据，例如下面msg里面的值：

<h2>{{msg}}</h2>

在Vue中就可以使用data()函数来动态绑定msg的值

<script>
export default {
  data () {
      return {
        msg: '你好，vue'
      }
  }
}
</script>

那么我们在html中常用标签元素的属性值，也可以通过Vue框架进行绑定吗？答案肯定是可以的。
例如下面的div标签元素，有一个title属性：

<div title=""></div>

现在我们想为title动态赋值，在Vue1.0的时候，可以按照上一篇直接在title属性中放置可绑定的数据：

<div title="{{title}}">哈哈哈哈</div>

<script>
export default {
  data () {
      return {
        title: '鼠标放上就显示'
      }
  }
}
</script>

但是在Vue1.0以上的版本，这种写法就会报错，是无法使用这种形式进行属性绑定的。
使用Vue绑定属性值的写法为：

<div v-bind:title="title">哈哈哈哈</div>

即在正常的属性名前面添加“v-bind:”标识，这里属性中的titile值取就是下面data()函数定义的title。
这种属性绑定的用途有很多，例如我们为img标签绑定src值，该图片资源是通过后台API接口传过来的，这里就可以动态指定图片的资源路径：

<img v-bind:src="img_url"/>

<script>
export default {
  data () {
      return {
        img_url: '../static/test1.png'
      }
  }
}
</script>

最后，绑定动态属性还有一个简写方法，就是将“v-bind”省略，只留一个冒号：

<img :src="img_url"/>

下面就是一个样例代码：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <h2>{{msg}}</h2>
     
     <div v-bind:title="title">哈哈哈哈</div>
     <img v-bind:src="img_url"/><br/>
     <img :src="img_url"/>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue',
        title: '鼠标放上就显示',
        img_url: '../static/test1.png'
      }
  }
}
</script>
<style></style>

然后是运行出来的效果：

以上就是Vue绑定属性的方法。

二、绑定Html

例如我们现在想循环一段HTML代码，使用原来我们绑定数据的方式，在data()函数中添加一段html：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <div>{{h}}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        h:'<h2>这里是h2</h2>'
      }
  }
}
</script>
<style></style>

然后会发现这个Html也被直接解析成了字符：

那么我们想让这一段Html被浏览器解析而不是直接输出，该怎么做呢？
此时我们就需要使用Vue的绑定Html的方式来操作，在需要绑定Html的标签上添加v-html属性：

<div v-html="h"></div>

这样h中的字符就会被解析为html，展示在<div>标签的内部：

这里延伸一下，我们之前使用双花括号来绑定数据，可以写在任意的地方，如果我们想把内容邦在某个标签上，也可以使用属性来绑定，即添加一个v-text属性：

<div v-text="msg"></div>

这里的msg就是单纯的数据，不会被解析为Html。

三、绑定class

我们在vue文件的style区域添加一些样式：

<style>
    .red{
      color: red;
    }
    .blue{
      color:blue;
    }
</style>

然后我们正常情况下，给div加样式，是在标签中添加class样式：

<div class="red">我是一个div</div>
<div class="blue">我是另一个div</div>

效果：

使用vue的“v-bind:class”可以进行样式控制，使用true或false的动态值来控制样式显不显示。

例如我们需要第一个div显示red样式，第二个暂时不显示blue样式：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <div v-bind:class="{'red':flag}">我是一个div</div><br/>
     <div v-bind:class="{'blue':!flag}">我是另一个div</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        flag:true
      }
  }
}
</script>

<style>
    .red{
      color: red;
    }
    .blue{
      color:blue;
    }
</style>

效果：

这里的“v-bind:class”依然可以简写为“:class”。

那么vue这种动态绑定class的写法的作用是什么呢？样式的动态绑定，多用于我们需要动态改变标签样式的时候使用，例如我们要根据不同的情况来控制不同区域的样式的显示，下面我们做个动态改变样式的小例子。例如我们做一个用户账户状态显示的列表循环：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <ul>
        <li v-for="item in items" :key="item.id" >
            id:{{item.id}} | 账户余额：{{item.money}} | 账户状态：{{item.status}}
        </li>
     </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        items: [
          { id: '1', money:'-100',status: '欠款' },
          { id: '2', money:'300',status: '正常' },
          { id: '3', money:'500',status: '正常' },
        ]
      }
  }
}
</script>

<style>
    .red{
      color: red;
    }
    .blue{
      color:blue;
    }
</style>

效果：

此时我们想给每一个循环元素动态设置一个颜色，但需要根据账户状态动态分配样式，欠款的显示红色，正常的显示蓝色，此时我们就可以使用“v-bind:class”对象属性，动态的切换class样式，例如我们为上面的循环元素根据账户状态设置样式：

<ul>
    <li v-for="item in items" :key="item.id" :class="{'red':item.status=='欠款','blue':item.status=='正常'}">
        id:{{item.id}} | 账户余额：{{item.money}} | 账户状态：{{item.status}}
    </li>
</ul>

此时li的样式会根据循环体各个元素的状态，去指定相应的class样式是否显示，最终的效果为：

以上就是class绑定的方法和使用场景。

三、绑定style

我们设置一个div，然后给它加一个默认样式：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <div class="box">
       我是一个div
     </div>
  </div>
</template>

<script>
</script>

<style>
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
    }
</style>

此时效果：

如果我们想根据其中的元素个数，来动态扩充其宽度，例如当div中有2个元素时，宽度扩充到200px，3个元素时宽度扩充至300px，以此类推。

此时我们就可以使用vue的“v-bind:style”来实现这个效果，即动态绑定元素的内联样式。例如（伪代码）：

<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div>

data:{
    activeColor:red;
    fontSize:30
}

上面的例子就是动态绑定了内联样式，让div的color颜色和fontSize字体大小以动态的data设定为准。那么我们就可以按照这种操作方式，实现上面我们动态改变div大小的效果，结合前面我们做的3个元素的items，给外层的div设置内联样式的时候，我们根据items数组的长度，来动态设置其style元素的width宽度，看看3个元素时，父级div能不能变成300px：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
     <div class="box" :style="{width:items.length+'00px'}">
       我是一个div<br/>
        <div v-for="item in items" :key="item.id" class="box-son">
            id:{{item.id}}
        </div>
     </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        items: [
          { id: '1', money:'-100',status: '欠款' },
          { id: '2', money:'300',status: '正常' },
          { id: '3', money:'500',status: '正常' },
        ]
      }
  }
}
</script>

<style>
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box-son{
      margin: 10px;
      background-color: blue;
      display:inline;
    }
</style>

效果：

然后我们把items变成4个元素：

<script>
export default {
  name: 'app',
  data () {
      return {
        items: [
          { id: '1', money:'-100',status: '欠款' },
          { id: '2', money:'300',status: '正常' },
          { id: '3', money:'500',status: '正常' },
          { id: '4', money:'-300',status: '欠款' }
        ]
      }
  }
}
</script>

效果2：

好了，以上就是vue实现绑定属性、Html、class和style的方法。下一篇我们讲解Vue的双向数据绑定以及Vue事件介绍等。

参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

​