Vue-13、Vue绑定css样式

1、绑定css样式字符串写法,适用于:样式的类名不确定

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定css样式</title>
    <!--引入vue-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border:1px solid black;
        }
        .normal{

        }
        .happy{

        }
        .sad{

        }
    </style>
</head>
<body>
<div id="root">
        <div class="basic" :class="mood" @click="changemood">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data() {
            return {
                name:'test',
                mood:'normal'
            }
        },
        methods:{
            changemood(){
                const arr = ['happy','sad','normal'];
                const index = Math.floor(Math.random()*3);
                this.mood=index;
            }
        }
    })
</script>
</body>
</html>

2、绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定。

3、绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用。

相关推荐
前端卧龙人3 分钟前
受够了webpack的速度,我选择了vite重构vue2项目
前端
巛、10 分钟前
ES6面试题
前端·面试·es6
周全全36 分钟前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙1 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪1 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九1 小时前
html、css(javaweb第一天)
前端·css·html
y东施效颦2 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿2 小时前
《开篇:课程目录》
前端·c#
摸鱼仙人~2 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客2 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js