• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue绑定class和绑定内联样式的实现方法

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

绑定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时,切换圆形和方形 ——内联样式绑定
2.初始box颜色为红色,点击开始按钮,每隔一秒切换颜色(红/蓝),再次点击按钮后取消颜色切换 —— class绑定

.box {
    width: 100px;
    height: 100px;
    background-color: red;
}

.blue {
    background-color: blue;
}
<div id="app">
    <div class="box" :style="borderRadius" @click="changeStyle" :class="{blue: isBlue}"></div>
    <button @click="startClick">开始</button>
</div>
new Vue({
    el: "#app",
    data: {
        isCircle: false,
        borderRadius: { borderRadius: "50%" },
        isStart: false,
        isBlue: false,
        timer: null
    },

    methods: {
        changeStyle: function () {
            if (this.borderRadius.borderRadius == "0%") {
                this.borderRadius.borderRadius = "50%"
            } else {
                this.borderRadius.borderRadius = "0%"
            }
        },
        startClick: function () {
            this.isStart = !this.isStart;
        }
    },

    watch: {
        isStart: function (val) {
            var vm = this;
            if (val) {
                console.log("开启颜色切换")
                this.timer = setInterval(function () {
                    vm.isBlue = !vm.isBlue
                }, 1000)
            }else{
                console.log("取消计时器,停止颜色切换")
                clearInterval(this.timer);
                this.timer = null;
            }

        }
    }
})

效果:

到此这篇关于Vue绑定class和绑定内联样式的实现方法的文章就介绍到这了,更多相关Vue绑定class和绑定内联样式内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript环境搭建并且部署到VSCode的详细步骤发布时间:2022-02-05
下一篇:
聊聊vue集成sweetalert2提示组件的问题发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap