v-bind

Posted 2020-12-26 goff-mi

• v-bind:class 可以简写成 :class

    <span v-bind:class="color">{{title}}</span>
    
    data: {
        title: ‘Welcome to duyi!!!‘,
        color: ‘red‘
    }

 

---

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

    .red{
        color: red;
    }
    .font{
        font-size: 30px;
    }
    <span :class="{red,font}">{{title}}</span>
    data: {
        red: true,
        font: true
    }
    <span v-bind:class="cssObject">{{title}}</span>
    data: {
        color: ‘red‘,
        cssObject: {
            red: true,
            font: true,
        }
    }

 

---

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

    .red{
        color: red;
    }
    .font{
        font-size: 30px;
    }
    <span v-bind:class="[fontSize, color]">{{title}}</span>
    data: {
        fontSize: ‘font‘,
        color: ‘red‘
    }
    .red{
        color: red;
    }
    .font{
        font-size: 30px;
    }
    <span v-bind:class="styleObj">{{title}}</span>
    data: {
        color: ‘red‘,
        styleObj: [‘font‘,‘red‘]
    }

 

---

:style

    <span :style="{color}">{{title}}</span>
    data: {
        color: ‘red‘
    }
    <span :style="[style1,style2]">{{title}}</span>
    data: {
        style1: {
            color: ‘green‘
        },
        style2: {
            fontWeight: 600
        }
    }

 

---

:type

    <input :type="type">
    data: {
        type: ‘text‘
    }

 

---

v-model 双向数据绑定

    <input :type="type" v-model=‘title‘>
    <div>{{title}}</div>
    data: {
        title: ‘Welcome to duyi!!!‘,
        type: ‘text‘
    }

 

模拟 v-model

    <input :type="text" v-model=‘title‘>
    <br>
    <input type="text" :value=‘title‘ @input="e=>title = e.target.value">
    <div>{{title}}</div>
    data: {
        title: ‘模拟v-model‘
    }