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

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

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

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

 
鼠标悬停

title:'我是一个title',

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

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

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

等效于{{msg}}

msg:'你好vue',

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

我是一个

flag:false,

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

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

我是一个

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

    

      

          {{a}}--{{index}}
      
    

7.v-bind:style绑定样式

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}}
  
  <div v-html="h">div>
    
    <div v-text="msg">div>
    <br>
    <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>
    
    <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
',
      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>