Vue屬性綁定

v-bind：屬性動態綁定數據，簡寫：

v-html：綁定html代碼

{{}}：綁定數據，另一種v-text

v-bind:class="{‘red’:isActive}"  ：類型綁定

<div v-for="(item,key) in list"></div>：可以獲取到key

v-bind:style="{width:blength+'px'}"

<template>
  <div id="app">
    <img :src="url" />
    <div v-html="info"></div>
    <div v-text="msg"></div>
    <div :class="{'red':isActive}">
      {{msg}}
    </div>
    <ul>
      <li v-for="(item,key) in list" :class="{'red':key==0}">
        {{item}}
      </li>
    </ul>
    <div :style="{width:valueA+'px'}" :class="{'redA':isActive}">
      cys
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      url:'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=255179540,3393043407&fm=173&app=25&f=JPEG?w=218&h=146&s=54B315D542097EEC18B9C1770300C072',
      info:'<h2>你好</h2>',
      msg:'你好',
      isActive:true,
      list:['1','2','3'],
      valueA:300
    };
  }
};
</script>

<style lang="scss">
.red{
  color: red
}
.redA{
  background: red
}
</style>