v-bind

发布时间：2020-12-14 03:19:10 所属栏目：大数据来源：网络整理

导读：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

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‘
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!