Vue常用指令

富文本数据渲染： v-html

 <div id="app">
    <div v-html="richText"></div>
 </div>

 new Vue({
    el:'#app',
    data:{
        'richText':'<h2>这是富文本</h2>',
    }
});

属性绑定： v-bind

使用v-bind绑定了a标签的href属性，当a标签被点击时，会根据对 应vue中的对应的url数据进行跳转到https://www.baidu.com
任何属性都可以被v-bind绑定

//v-bind:（class、value、src...）
<div id="app">
    <a v-bind:href="url">click me</a>
    <div class="box" v-bind:class="isActive?'active':''"></div>
</div>  

 new Vue({
    el:'#app',
    data:{
        'url':'https://www.baidu.com',
        'isActive':true
    }
});

条件渲染：

• v-if
• v-else
• v-else-if
• v-show

 <div id="app">
   <div class="box" v-if="isShow">v-if演示效果</div>
   <div class="box" v-else>v-else演示效果</div>
   <div class="box" v-show="isShow">v-show演示</div>
   //v-show 是通过控制display的属性来控制显示隐藏的
 </div>

new Vue({
    el:'#app',
    data:{
       'isShow':false
    }
});

事件绑定 ：

• v-on:click / @click
• v-on:keyup / @keyup

<div id="app">
 <button @click="handleBg">背景控制</button>
 <button v-on:click="handleShow">显示控制</button>
</div>

new Vue({
    el:'#app',
    data:{ 
    },
    methods:{
      handleBg(){ 
       //根据需求填写即可
      },
      handleShow(){  
      //根据需求填写即可
     }
    }
});

列表渲染 v-for

<div id="app">
  <ul>
      <li v-for="(item,index) in stu">
        序号: {{index}} ,
        姓名: {{item.name}} ,
        分数: {{item.score}} ,     
      </li>
    </ul>
</div>

 new Vue({
    el:'#app', 
    data:{
      'stu':[
        {name:'张三',score:100},
        {name:'李四',score:80},
        {name:'王五',score:60}
      ]
    }
  })