vue2.0 之标签属性

Posted 2020-09-25 shhnwangjian

标签属性v-bind

<template>
  <div>
    <ul>
      <li v-for="item in list"> {{ item.name }} - {{ item.price }}</li>
    </ul>
    <a v-bind:href="link" v-bind:title="hello">to cnblogs</a><br/>
    <a class="link-href" v-bind:class="classStr">class使用方法一</a><br/>
    <a :class="classList">class使用方法二</a><br/>
    <a :class="classObj">class使用方法三</a><br/>
    <a :class="[classA, classB]">class使用方法四</a><br/>
    <a :class="[classA, {\'red-font\': hasError}]">class使用方法五</a><br/>
    <a class="link-href" :style="linkCss">内敛样式</a><br/>
    <button v-on:click="addItem">addItem</button>
  </div>
</template>

<script>
  import Vue from \'vue\'
  export default {
    data () {
      return {
        hello: \'hello world\',
        link: \'http://www.cnblogs.com/shhnwangjian\',
        hasError: true,
        classA: \'hello\',
        classB: \'world\',
        classStr: \'red-font\',
        classList: [\'red-font\', \'blue-font\'],
        linkCss: {
          \'color\': \'red\',
          \'font-size\': \'20px\'
        },
        classObj: {
          \'red-font\': true,
          \'blue-font\': false
        },
        list: [
          {
            name: \'apple 7S\',
            price: 6188
          },
          {
            name: \'huawei P10\',
            price: 4288
          },
          {
            name: \'mi6\',
            price: 2999
          }
        ]
      }
    },
    methods: {
      addItem () {
        Vue.set(this.list, 1, {
          name: \'meizu\',
          price: 2499
        })
      }
    }
  }
</script>

<style>
  html {
    height: 100%;
  }
</style>

总结：

• v-bind动态绑定标签属性
• v-bind可简写为：
• 使用v-bind绑定class和内联样式