Vue3学习笔记（9.1）

Vue.js style（内联样式）

我们可以在v-bind:style直接设置样式，可以简写:style

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:41:44
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <div :style="{color:activeColor,fontSize:fontSize+'px'}" >基尼太美</div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    isActive:true,
                    hasError:true,
                    error:null,
                    activeClass:'active',
                    errorClass:'text_danger',
                    activeColor:'red',
                    fontSize:30
                }
            }
            // computed:{
            //     classObject(){
            //         return{
            //             active:this.isActive && !this.error,
            //             'text-danger':this.error&&this.error.type==='fatal'
            //         }
            //     }
            // }
        }
        

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

也可以直接绑定到一个样式对象

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:45:53
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <div :style="styleObject" >基尼太美</div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    // isActive:true,
                    // hasError:true,
                    // error:null,
                    activeClass:'active',
                    errorClass:'text_danger',
                    
                    styleObject:{
                        color:'purple',
                        fontSize:"30px",
                    }
                }
            }
            // computed:{
            //     classObject(){
            //         return{
            //             active:this.isActive && !this.error,
            //             'text-danger':this.error&&this.error.type==='fatal'
            //         }
            //     }
            // }
        }
        

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

v-bind：style可以使用数组将多个样式对象应用到一个元素上：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:49:52
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <div :style="[styleObject,secondStyle]" >基尼太美</div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    // isActive:true,
                    // hasError:true,
                    // error:null,
                    activeClass:'active',
                    errorClass:'text_danger',
                    
                    styleObject:{
                        color:'purple',
                        fontSize:"30px",
                    },
                    secondStyle:{
                        'font-weight':'bold'
                    }
                }
            }
            // computed:{
            //     classObject(){
            //         return{
            //             active:this.isActive && !this.error,
            //             'text-danger':this.error&&this.error.type==='fatal'
            //         }
            //     }
            // }
        }
        

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

这样，基尼太美就加粗了。

注意：当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。

多重值

可以为style绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display:flex。

组件上使用class属性

当我们在带有单个根元素的自定义组件上使用class属性，这些class将被添加到该元素中。此元素上的现有class将不会被覆盖。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 16:04:54
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <!-- <div :style="[styleObject,secondStyle]" >基尼太美</div> -->
        <mez class="classC classD"></mez>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app=Vue.createApp({})
        app.component('mez',{
            template:'<h1 class="classA classB">Let is lie</h1>'
        })

        app.mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

对于带数据绑定class也同样适用：

<my-component :class="{active:isActive}"></my-component>

当isActive为TRUE时，HTML将被渲染成为：

<p class="active">Hi</p>

如果你的组件有多个根元素，你需要定义哪部分将接收这个类。可以使用$attrs组件属性执行此操作：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-04 08:54:29
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }

    .classA{
        color:coral;
        font-size: 30px;

    }
    .classB{
        color:rgb(255, 80, 235);
        font-size: 30px;

    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <!-- <div :style="[styleObject,secondStyle]" >基尼太美</div> -->
        <mez class="classA"></mez>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app=Vue.createApp({})
        app.component('mez',{
            template:`<h1 :class="$attrs.class">Let is lie</h1>
            <span>这是一个子组件</span>`
        })

        app.mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>