Vue绑定属性 绑定Class 绑定style

vue是如何绑定属性和class以及style的

下面我将会插入一段代码，本人在代码里做了相当详细的注释。

<template>

<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
  <div id="app">
    <h3>{{msg}}</h3> <!-- 绑定业务逻辑里的数据-->
    <br>
    <div v-bind:title="title">鼠标悬停试试看，冒号后面的title是固定语法，详情可见官方文档</div>
  
    <hr>
    <img src="./assets/M.jpg"/>
  
    <br>
    <br>
    <!-- 绑定属性 -->
    <img v-bind:src="url"/><!-- 绑定了业务逻辑层里的url-->
    <!-- 与下面这句语法效果一样 -->
    <br>
    <img :src='url'/>
    <br>
    <br>

    <!--绑定HTML -->
    {{h}}
    <!--与下面显示效果完全不同，请注意页面的显示-->
    <div v-html="h"></div>
    <br>
    <br>

    <!-- 绑定数据的另一种方法 -->
    <div v-text="msg">
    </div>
    <br>
    <br>


    <!-- v-bind:class  :class的使用 -->
    <div v-bind:class="{'red':flag}">  <!--red为在style中定义的一个class,会使用到'red' class里定义的样式。
                                         flag为引用的一个属性(为true时执行),在逻辑层里定义-->
    <!-- <div v-bind:class="'red'">  这种语法格式就是普通格式，没有引用flag属性 -->
      我是第一个div
    </div>
    <br>
    <br>
    <div :class="{'red':flag,'blue':!flag}"> <!--与上一种语法说明同理，只不过是多了一个'blue' class -->
      我是第二个div
    </div>
    <br>
    <br>

    <!-- 循环数据 第一个数据高量 -->
      <ul>
        <li v-for="(item,key) in list"><!--可以看到增加了一个key，key为索引值从0开始-->
         {{key}}---{{item}}             <!--在页面中仔细查看输出-->
        </li>
      </ul>
        <br>
      <ul>
        <li v-for="(item,key) in list"  :class="{'red':key==0,'blue':key==1}">
                                <!-- 这里的class指定了 key=0应用'red'样式，key=1应用'blue'样式-->
          {{key}}---{{item}}
        </li>
      </ul>
      <br>
      <br>


      <!-- v-bind:style  :style的使用 -->
      <div class="box" v-bind:style="{'width':boxWdith+'px','height':boxHeight+'px'}">
      <!--应用'box'class——>绑定style属性——>手动改变width属性值需在逻辑层里添加boxWidth数据,height属性同理-->
      <!--绑定class也可以用到上面所说的语法，<div v-bind:style="{'width':boxWdith+'px'}" :class="'box'">-->
      我是另一个div
    </div>

  </div>
</template>
 
<script>
export default { // 表示将组件暴露出去
  // name: 'App',  给组件起个名字，可以删除
  data () {   //业务逻辑里定义的数据 
    return {
      msg: '今天依然很好',  //  msg: "今天依然很好" 这里单引号和双引号是一样的结果
      title:'这里是个标题',

      //url:require('./assets/M.jpg'),  //在这里定义了url
      url:'./static/M.jpg',            //此种路径问题也是一个重点问题，在此先不做讲解
      h:'<h3>这里是一个h标签</h3>',     //在逻辑层里写上HTML，需要在template绑定才可以正常显示
      flag:true,
      list:['123','456','789'],
      boxWdith:500,
      boxHeight:500
    }
  }
}
</script>

<style>
.red{
  color: red;
  }

.blue{
  color:blue;
  }

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

最后的运行效果是这样的

每一幅图都是连在一起的，一共有三张图。关于src路径问题，我将会在下一篇文章里做详细讲解。
这是自己在学习过程中所作的一个小总结，若有疑问或是不解请在下方评论，谢谢。