|
绑定class
方式一：
对象语法：给 v-bind:class传 一个对象，以动态地切换 class
当对象中某key对应的值为true时，该key做为className被添加到标签上
.box { width: 100px; height: 100px; background-color: gray;}.circle { border-radius: 50%;}<div id="app"> <div class="box" @click="isCircle = !isCircle" :class="{circle:isCircle}"></div> <!--当isCircle为true时，该div的class名多加一个circle--> <p>{{isCircle}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> new Vue({ el:"#app", data:{ isCircle: false } })</script>初始化时box为方形，点击时切换成圆形，再次点击，切换成方形，以此类推
:class="{circle:isCircle}"还可以写到计算属性computed里，return这个对象
<div class="box" @click="isCircle = !isCircle" :class="divChange"></div> computed:{ divChange:function(){ return {circle:this.isCircle} } }方式二：
数组语法：把一个数组传给 v-bind:class，以应用一个 class 列表
css多加一个蓝色背景的效果：
.blue { background-color: blue;}<div id="app"> <div class="box" v-on:click="clickFun()" :class="[color,divChange()]"></div> <p>{{isCircle}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> new Vue({ el:"#app", data:{ isCircle: false, color:"" }, methods:{ divChange: function(){ return {circle:this.isCircle} }, clickFun: function(){ this.isCircle = !this.isCircle; if (this.isCircle){ this.color = "blue" }else{ this.color = "" } } } })</script>
绑定内联样式
绑定内联样式同样可以用对象语法或数组语法，此处用对象语法和计算属性结合的方法实例：
<div id="app"> <!--绑定内联样式--> <div class="box" v-on:click="clickFun()" :style="divStyle"></div> <p>{{isCircle}}</p></div>divStyle：
divStyle: function(){ return { backgroundColor:this.color }}这样就可以将想要的颜色设置到.box上了
小demo：
1.点击box时，切换圆形和方形
下载地址:
TypeScript环境搭建并且部署到VSCode的详细步骤
聊聊vue集成sweetalert2提示组件的问题 |
