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样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用。

相关推荐
why技术几秒前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪36 分钟前
JQ常规面试题
前端·javascript·面试
海上彼尚37 分钟前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index1 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
Shimeng_19891 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
一只一只妖2 小时前
前端导出带有合并单元格的列表
前端
lilye662 小时前
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
前端·数据挖掘·数据分析
MZWeiei2 小时前
MVVM 模式,以及 Angular、React、Vue 和 jQuery 的区别与关系
vue.js·react.js·angular.js
前端 贾公子2 小时前
《Vuejs设计与实现》第 8 章(挂载与更新)
开发语言·前端·javascript
述雾学java2 小时前
Spring Boot + Vue 前后端分离项目解决跨域问题详解
vue.js·spring boot·后端