当前位置：首页 > news >正文

Vue3学习笔记（9.1）

news 2025/8/2 20:59:12

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:0isActive: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>