前端UI框架——VueAPI使用之Class 与 Style 绑定

最新推荐文章于 2024-08-21 23:22:26 发布

Blockchain Explorer

最新推荐文章于 2024-08-21 23:22:26 发布

阅读量645

点赞数

分类专栏： Web框架/Vue/ 文章标签： Class 与 Style 绑定 vue

本文链接：https://blog.csdn.net/TDCQZD/article/details/82154817

版权

Web框架/Vue/ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、基本介绍

1、绑定 HTML Class
字符串语法
对象语法
数组语法
2、绑定内联样式——Style
对象语法

二、代码示例：

1、class(字符串)

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class(字符串)</title>
    <style>
        .juzhong{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition:1s ;
        }

        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .test2{
            width: 200px;
            height: 200px;
            background: gray;
        }
    </style>
</head>
<!--Class 与 Style 绑定
1、绑定 HTML Class
        字符串
        数组
        对象
2、绑定内联样式
        v-bind:style
-->
<body>
    <div id="app">
       <div class="juzhong " :class="msg">

       </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg:"test"
        }
    })

    var flag = true;
    setInterval(()=>{
        if(flag){
            vm.msg="test2";
        }else {
            vm.msg="test";
        }
        flag =!flag;
    },1000)

</script>
</html>

2、class(数组)

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .juzhong{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition:1s ;
        }

        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .test2{
            width: 200px;
            height: 200px;
            background: gray;
        }
    </style>
</head>
<body>
    <div id="app">
       <div  :class="[juzhong,test]" >

       </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            // msg:["juzhong","test"]
            juzhong:"juzhong",
            test:"test2"
        }
    })



</script>
</html>

3、class(对象)

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .juzhong{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition:1s ;
        }

        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .test2{
            width: 200px;
            height: 200px;
            background: gray;
        }
    </style>
</head>
<body>
    <div id="app">
       <div  :class="msg" >

       </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg:{
                test:false,
                test2:true,
                juzhong:true
            }

        }
    })

    setInterval(()=>{
        vm.msg.test = !vm.msg.test;
        vm.msg.test2 = !vm.msg.test2;
    },1000)


</script>
</html>

4、style(对象)

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .juzhong{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition:1s ;
        }

        .test{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .test2{
            width: 200px;
            height: 200px;
            background: gray;
        }
    </style>
</head>
<body>
    <div id="app">
       <div  :class="msg" :style="msg1">
            我是一个div
       </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const color = "white";
    const vm = new Vue({
        el:"#app",
        data:{
            msg:{
                test:false,
                test2:true,
                juzhong:true
            },
            msg1:{
                'text-align': 'center',
                color: color,
                'line-height': '200px'
            }
        }
    })


    setInterval(()=>{
        vm.msg.test = !vm.msg.test;
        vm.msg.test2 = !vm.msg.test2;
    },1000)


</script>
</html>