Vue绑定属性 绑定Class 绑定style

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

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

<template>


  <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"/>
    
    <br>
    <img :src='url'/>
    <br>
    <br>

    
    {{h}}
    
    <div v-html="h">div>
    <br>
    <br>

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


    
    <div v-bind:class="{'red':flag}">  
    
      我是第一个div
    div>
    <br>
    <br>
    <div :class="{'red':flag,'blue':!flag}"> 
      我是第二个div
    div>
    <br>
    <br>

    
      <ul>
        <li v-for="(item,key) in list">
         {{key}}---{{item}}             
        li>
      ul>
        <br>
      <ul>
        <li v-for="(item,key) in list"  :class="{'red':key==0,'blue':key==1}">
                                
          {{key}}---{{item}}
        li>
      ul>
      <br>
      <br>


      
      <div class="box" v-bind:style="{'width':boxWdith+'px','height':boxHeight+'px'}">
      
      
      我是另一个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:'
这里是一个h标签
',     //在逻辑层里写上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路径问题，我将会在下一篇文章里做详细讲解。
这是自己在学习过程中所作的一个小总结，若有疑问或是不解请在下方评论，谢谢。