Vue绑定属性 绑定Class 绑定style

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <br>

    <!-- 绑定属性 -->
    <div v-bind:title="title">鼠标移动过来</div>

    <!-- 在tamplate中引入本地图片 -->
    在tamplate中引入本地图片:
    <img src="./assets/logo.png">
    <br>
    绑定属性 图片要用相对路径:
    <!-- 绑定属性 图片要用相对路径 -->
    <img v-bind:src="url" />

    <br>
    {{h}}

    <br>
    <!-- 绑定html -->
    <div v-html="h"></div>

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

    <br>

    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>

    <br>
    <!-- 绑定属性class的使用 v-bind:class="{red:flag}" -->
    <div v-bind:class="{'red':flag}">
      我是一个div
    </div>

    <br>
    <!-- 绑定属性class的使用 :class相当于v-bind:class -->
    <div v-bind:class="{'red':flag,'blue':!flag}">
      我是另一个div
    </div>

    <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>
    <!-- v-bind:style :style的使用 绑定样式 从data里面获得的需要绑定其他不用 -->
    <div class="box">
    </div>

    <br>
    <!-- 内联属性 -->
    <div class="box" v-bind:style="{width:boxwidth+'px'}">
    </div>

  </div>
</template>

<script>
//在本地的静态图片需要这样引用
import logo from './assets/logo.png'
export default {
  name: 'app',
  data () {
    return {
      msg: '你好Vue',
      title:'出来了吧',
      //绑定属性
      url:logo,
      h:'<h2>我是h2</h2>',
      list:[111,222,333],
      flag:false,
      boxwidth:300
    }
  }
}
</script>

<style lang="scss">
    .red{
      color: red;
    }
    .blue{
      color:blue;
    }
    .box{
      height: 100px;
      width: 100px;
      background-color: red;
    }
</style>

运行截图：