v-bind小demo

     啊哈哈，小颖好久没有更新博客啦，大家有没有想我呀，嘻嘻，自恋一把，?今天小颖把v-bind指令中的v-bind:class、v-bind:style、v-bind:disabled做了一个小demo，来给演示下，这些指令都怎么用，请看下放：

效果图：

代码看这里：

<template>
    <div id="app">
        <div class="v-bind-demo">
            <div class="v-bind-class">
                <div v-bind:class="{ red: isRed,'border-pink':borderIsPink}">v-bind:class</div>
                <div :class="{ red: isRed,'border-pink':borderIsPink}">:class</div>
            </div>
            <div class="v-bind-style">
                <div v-bind:style="{width:developmentWidth+'px',height:developmentHeight+'px','background-color': 'pink'}">v-bind:style</div>
                <div :style="{width:developmentWidth+'px',height:developmentHeight+'px','background-color': '#29f7f4'}">:style</div>
                <button v-on:click="changeDivFun">改变div宽和高</button>
                <button @click="revokedDivFun">div恢复原来的宽和高</button>
            </div>
            <div class="v-bind-disabled">
                <button v-bind:disabled="disabledOneBtn" @click="disableBtn">v-bind:disabled默认不被禁用，点击后被禁用</button>
                <button :disabled="disabledTwoBtn">:disabled默认被禁用</button>
                <button @click="revokedDisableFun">解除所有button的禁用</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            isRed: true,
            borderIsPink: true,
            developmentWidth: 120,
            developmentHeight: 30,
            divChange: false,
            disabledOneBtn: false,
            disabledTwoBtn: true,
        }
    },
    methods: {
        //事件的两种写法：
        // changeDivFun:function(){},changeDivFun(){}
        changeDivFun() {
            var _this = this;
            if (!_this.divChange) {
                _this.divChange = true;
                _this.developmentWidth = 200;
                _this.developmentHeight = _this.developmentHeight * 2;
            }
        },
        revokedDivFun: function() {
            var _this = this;
            if (_this.divChange) {
                _this.divChange = false;
                _this.developmentWidth = 120;
                _this.developmentHeight = 30;
            }
        },
        disableBtn() {
            this.disabledOneBtn = true;
        },
        revokedDisableFun() {
            this.disabledOneBtn = false;
            this.disabledTwoBtn = false;
        }
    }
}
</script>
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}

.v-bind-class div {
    width: 100px;
    height: 20px;
    display: inline;
    /* 设置块级元素变为行内元素显示 */
}

.red {
    background-color: red;
}

.border-pink {
    border: 1px solid pink;
}

.v-bind-style {
    border: 1px solid #e7fb28;
    text-align: left;
}
</style>

 

转载于:https://www.cnblogs.com/yingzi1028/p/7603833.html