Vue 11 - 绑定css和style样式

最新推荐文章于 2024-06-09 20:17:27 发布

大力pig

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量167

点赞数

分类专栏： js 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/m0_53753920/article/details/129974633

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

功能说明

1. 点击一个div区域，随机变化4中css样式。

2. 将一个div模块绑定style样式

3. 要求：都需要交给vue托管。

效果演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名属性</title>
    <style>
        .basic{
            background-color: aqua;
            font-size: 10px;
        }
        .happy{
            font-size: 20px;
            background-color: blanchedalmond;
        }
        .sad{
            font-size: 30px;
            background-color: blueviolet;
        }
        .normal{
            font-size: large;
            background-color: orange;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- 绑定css样式 -->
    <div class="basic" v-bind:class="mood" v-on:click="changeMood">欢迎来{{name}}学习</div>
    <br/>
    <div class="basic" v-bind:style="styleObj">欢迎来{{name}}学习</div>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
    new Vue({
        el: '#root',
        data: {
            name:'西湖区',
            mood:'sad',
            styleObj:{
                fontSize:'40px',
                color:'green',
                backgroundColor:'orange'
                

            }
        },
        methods: {
            changeMood() {
                const arr = ['happy', 'sad', 'normal']
                // 随机生成选择一个
                let x = Math.floor(Math.random()*3)
                this.mood = arr[x];
                console.log(`现在的样式是${this.mood}`)
            }
        }
    })
</script>