vue绑定样式:class,:style

首页->学习资料->web前端->vue教程->vue2 关键词: 发布时间:2024-01-04 00:30:41 浏览次数:617
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p26:vue绑定样式</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
<style type="text/css">
    .border-one-px {
        border: 1px dashed;
    }

    .padding5 {
        padding: 5px;
    }

    .red {
        padding: 10px;
        color: red;
    }

    .size10 {
        font-size: 10px;
    }

    .size20 {
        font-size: 20px;
    }

    .size30 {
        font-size: 30px;
    }
</style>

<div id="demo">
    <div class="border-one-px" :class="mode">{{website}}</div>
    <button @click="changeColor">改变颜色</button>
    <button @click="changeSize">随机改变字体大小</button>
    <div :class="classObj">为false的样式失效</div>
    <div :style="styleObj">style样式</div>
</div>
<script type="text/javascript">
    //创建vue实例
    const vm = new Vue({
        el: "#demo",
        data: {
            website: 'http://www.hu-rong.com',
            mode: 'padding5',
            classArr: ['size20', 'size30'],
            classObj:{
                'size10':false,
                'size20':false,
                'size30':true,
            },
            styleObj:{
                //注意格式不是font-size
                fontSize:'40px',
                backgroundColor:'yellow',
            }
        },
        methods: {
            changeColor() {
                this.mode = 'red';
            },
            changeSize() {
                const index = Math.floor(Math.random() * 3);
                this.mode = this.classArr[index];
            }
        },
        //computed中定义计算属性，计算属性会有缓存，模板中多次调用get时只会计算一次，效果更高，如果用methods则每次都会调用
        computed: {},
        watch: {},
    })

</script>
</body>
</html>
赞:(0)
踩:(0)