vue绑定class样式-CFANZ编程社区

vue绑定class样式
书呆鱼 2022-03-22 阅读 102
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<style>
    .demo{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    .style1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .style2{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    .style3{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .type1{
       font-size:30px;
    }
    .type2{
        font-weight: bold;
    }
    .type3{
        color: blueviolet;
    }
</style>
<body>
    <!-- vue绑定class样式，变化的样式用v-bind来写 -->
    <!-- 第一种字符串形式绑定 -->
<!-- <div id="app" class="demo" :class="mood" @click="myfunction">测试</div> -->

<!-- 2、用数组形式绑定 -->
<!-- <div id="app" class="demo" :class="arr" @click="myfunction">测试</div> -->

<!-- 3、用对象形式绑定 -->
<!-- <div id="app" class="demo" :class="obj" @click="myfunction">测试</div> -->

<!-- vue绑定style样式  -->
<!-- 1、以对象形式绑定 -->
<div id="app" class="demo" :style="Arr" @click="myfunction">测试</div>

<!-- 2、以数组形式绑定 -->
<script>
    new Vue({
        el:'#app',
        data:{
           mood:'style1',
           arr : ["type1" ,"type2" , "type3"],
           obj:{
               type1:true,
               type2:false,
               type3:true,
           },
           form:{
            backgroundColor:'blue'
           },
           form2:{
            color:'red'
           },
           Arr:[
           {
            backgroundColor:'blue'
           },
           {
            color:'red'
           }]
        },
        methods:{
            //点击div变换指定颜色
            // myfunction(){
            //     return this.mood = 'style2'
            // }


            //随机3种颜色变化
            // Math.floor（）向下取整 Math.random随机生成0-1的数生成不到1
            myfunction(){
                const arr = ["style1" , "style2" , "style3"]
                const index = Math.floor(Math.random()*3);
                return this.mood = arr[index]
            }
        }
    })
</script>
</body>
</html>
0 条评论