八、VUE标签属性与条件渲染

1，v-bind绑定标签的属性（v-bind可以缩写为：号）

    VUE

<template>
  <div>
    <a :herf="link" v-bind:title="title">测试v-bind</a>
    <em class="styleSting" :class="className" ></em>
    <em class="styleSting" :class="classNamelist" ></em>
    <p :class="[classA,classB]"></p>
    <strong :style="linkcss">我是调用css样式出来的</strong>
    <span v-if="PadA">PadA</span>
    <span v-show="!PadA">PadB</span>
    <button v-on:click="toggleqa">切换</button>
    <button v-on:click="toggle">切换</button>
  </div>
</template>
<script>
import componentA from './components/a'
export default{
components:{  
  componentA:componentA  
},
data (){
    return {
      link:'http://www.baidu.com',
      title:'我是v-bind调用的数据',
      style:'linde',//属性展示class
      className:{ //对象展示Class
        'style1':true,
        'styles': false
      },
      PadA:false,
      classA:'classsa',
      classB:'classsb',
      hasErr:false,
      classNamelist:[//数组展示
         'stylelist',
         'styleslist1'
      ],
      linkcss:{ //内联样式添加
        'color':'red',
        'font-size':'20px'
      },
      methods:{
         toggle (){
            this.PadA = !this.PadA
         } 
      }
    }
  }
}
</script>

JS+HTML与七栏目相同