Vue-实操2

最新推荐文章于 2024-07-25 01:02:05 发布

Ellen-琳子

最新推荐文章于 2024-07-25 01:02:05 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/weixin_45905671/article/details/105926951

版权

属性绑定Class和Style
绑定Class
1.通过数组的方式来实现
2.通过对象的方式来实现

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue模板语法</title>
    <style>
        .title{
            font-size: 20px;
            color: red;
        }
        .main-title{
            font-weight: 800;
        }
    </style>
</head>
<body>
    <p class="title">中国,加油</p>
    <div id="app">
        <!-- <p v-bind:class="[class1,class2]">中国,加油！！！</p> -->
        <!-- <p v-bind:class="[class1]">中国,加油！！！</p> -->
        <!-- <p v-bind:class="{title:class1,'main-title':class2}">hello world</p> -->
        <!-- <p v-bind:style="{'background-color':background}">教育</p> -->
        <!-- <p v-bind:style="{backgroundColor:background}">教育</p> -->
        <!-- <p :style="pstyle">教育</p> -->
        <p v-bind:style="[pclass1,pclass2]">什么时候好起来</p>
    </div>
</body>
</html>

<script	src="./vue.js"></script> 

<script>
    new Vue({
        el: "#app",
        data: {
            class1:"title main-title",
            // class2:"main-title"
            class1:true,
            class2:true,
            background: 'red',
            pstyle:{
                backgroundColor:'red',
                'font-size':'20px'
            },
            pclass1:{
                backgroundColor:'rgb(255,255,51)',
                fontSize: '22px'
            },
            pclass2:{
                'font-weight':'800',
            }

        }

    })
</script>

Ellen-琳子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-实操2

属性绑定Class和Style绑定Class1.通过数组的方式来实现2.通过对象的方式来实现!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
复制链接

扫一扫