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>