Vue指令

Posted 2020-12-26 goff-mi

1. v-text
2. v-html 注入html内容
3. v-if 通过 v-if 进行判断
4. v-else 要配合 v-if 使用
5. v-show
6. v-if 与 v-show 的区别

• v-if : 真正的渲染
• v-show : 通过改变 css 样式 display 来实现是否显示
• v-show 的性能好一些

7. v-for（遍历数据）
8. v-on 绑定事件 可以简写成 @

• v-on:keyup.enter (.enter键值修饰符)

9. v-bind 标签的属性

• class
• id
• type
• style
• reayonly
• data-xxx

• :class={} class 的值由 key 组成，但是由 value 决定

<span v-bind:class="cssObj">{{title}}</span>
new Vue({
    el: ‘#app‘,
    data: {
        cssObj:{
            red:true,
            font:true
        }
    }
})

 

• 数组形式

• :class=[] 是由 数组中的每一项对应的值决定

<span v-bind:class="styleObj">{{title}}</span>
    el: ‘#app‘,
    data: {
        styleObj:[‘red‘,‘font‘]
    }
})

 

• v-model 双向数据绑定

  <input type="text" v-model="title">
    <span v-bind:class="styleObj">{{title}}</span>
new Vue({
    el: ‘#app‘,
    data: {
        title: "Hello World!!"
    }
    
})

 

不用model的双向数据绑定

<input type="text" :value="title" @input="e=>title=e.target.value">
<span v-bind:class="styleObj">{{title}}</span>