vue基础：绑定属性class，绑定style

vue基础：绑定属性class，绑定style

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

1.通过v-bind：title="****"来绑定显示鼠标悬停时的信息。

 <div v-bind:title="title">鼠标悬停</div>

title:'我是一个title',

2.通过v-bind:src"****"绑定动态图片。

<img v-bind:src="url"/><!--绑定属性-->

url:'https://vuejs.org/images/logo.png'

3.绑定数据的另一种方法

<div v-text="msg"></div>等效于{{msg}}

msg:'你好vue',

4.通过v-bind:class="{‘active’:flag}"绑定样式其中，active是样式，flag是取值（true||false）当flag赋值为true时执行active样式。

<div v-bind:class="{'active':flag}">我是一个</div>

flag:false,

.active {
	width: 100px;
	height: 100px;
	background: green;
}

5.同时可以设置样式的摇摆，选择性，当flag为true时执行active，当flag为false执行另一种样式

<div v-bind:class="{'active':flag,'blue':!flag}">我是一个</div>

6.循环输出的第一个数据给样式，首先将值和索引分开表示，更具索引定位值，并修改其样式

    <ul>
      <li v-for="(a,index) in list" :class="{'blue':index==0,'active':index==1}">
          {{a}}--{{index}}
      </li>
    </ul>

7.v-bind:style绑定样式

    <div class="box" v-bind:style="{width:boxWdith+'px'}">
    </div>

boxWdith:300

.box{
  border: 3px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <br>
  <div v-bind:title="title">鼠标悬停</div>
  <img src="https://vuejs.org/images/logo.png"/>
  <br>
  <img v-bind:src="url"/><!--绑定属性-->
  <br>
  <img :src="url"><!--绑定动态数据-->
  <br>
  {{h}}
  <!--绑定html-->
  <div v-html="h"></div>
    <!--绑定另一种数据的方法--><!--绑定另一种数据的方法-->
    <div v-text="msg"></div>
    <br><!--v-bind:class   :class的使用-->
    <div v-bind:class="{'active':flag}">我是一个</div>
    <br>
    <div v-bind:class="{'active':flag,'blue':!flag}">我是一个</div>
    <br>
    <ul>
      <li v-for="(a,index) in list">
          {{a}}--{{index}}
      </li>
    </ul>
    <!--循环的第一个数据给样式-->
    <!--首先将值和索引分开表示，更具索引定位值，并修改其样式-->
    <br>
    <ul>
      <li v-for="(a,index) in list" :class="{'blue':index==0,'active':index==1}">
          {{a}}--{{index}}
      </li>
    </ul>
    <br>
    <!--v-bind:style-->
    <div class="box" v-bind:style="{width:boxWdith+'px'}">

    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:'你好vue',
      title:'我是一个title',
      url:'https://vuejs.org/images/logo.png',
      h:'<h2>我是h2</h2>',
      list:['111','222','333'],
      flag:false,
      boxWdith:300
    }
  }
}
</script>

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.blue{
  color: blue;
}
.box{
  border: 3px;
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>