vue动态绑定 style 的丰富案例

chinayun_6401ZIP20v-bind动态绑定style.zip  543.21KB

资源文件列表:

ZIP 20v-bind动态绑定style.zip 大约有7个文件
  1. 20v-bind动态绑定style/
  2. 20v-bind动态绑定style/css/
  3. 20v-bind动态绑定style/css/element-plus.css 319.25KB
  4. 20v-bind动态绑定style/index.html 1.9KB
  5. 20v-bind动态绑定style/js/
  6. 20v-bind动态绑定style/js/element-plus.js 1.97MB
  7. 20v-bind动态绑定style/js/vue.global.js 525.07KB

资源介绍:

本资源将全方位地为您呈现 v-bind 动态绑定 style 的丰富案例，其中涵盖了绑定数组、对象以及函数等详尽且深入的案例分析。仅需这一篇，就能让您对 v-bind 动态绑定style有全面而透彻的理解。
<!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>v-bind动态绑定style</title> <link rel="stylesheet" href="./css/element-plus.css"/> <script src="./js/vue.global.js"></script> <script src="./js/element-plus.js"></script> </head> <body> <div id="app"> <el-divider content-position="left">对象</el-divider> <p :style="{width:widthVal,height:heightVal,border:borderVal}">段落1</p> <!-- 等价于 --> <p :style="{width:'300px',height:'60px',border:'1px solid #ccc'}">段落2</p> <el-divider content-position="left">数组</el-divider> <p :style="[styleObj1]">段落3</p> <p :style="[styleObj1,styleObj2,styleObj3]">段落4</p> <el-divider content-position="left">函数</el-divider> <p :style="getStyleObj()">段落5</p> </div> </body> <script> const {createApp}=Vue; const app=createApp({ data(){ return { widthVal:'300px', heightVal:'60px', borderVal:'1px solid #ccc', styleObj1:{ width:'300px', height:'60px', border:'1px solid #ccc', }, styleObj2:{ color:'red' }, styleObj3:{ fontSize:'24px' } } }, methods:{ getStyleObj(){ return{ width:this.widthVal, border:this.borderVal, height:this.heightVal } } } }) app.use(ElementPlus); app.mount('#app'); </script> </html>
100+评论
captcha
    相关资源