ZIPvue动态绑定 class 的丰富案例 543.7KB

chinayun_6401需要积分:4(1积分=1元)

资源文件列表:

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

资源介绍:

本资源将全方位地为您呈现 v-bind 动态绑定 class 的丰富案例，其中涵盖了绑定字符串、数组、对象以及函数等详尽且深入的案例分析。仅需这一篇，就能让您对 v-bind 动态绑定 class 有全面而透彻的理解。
<!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动态绑定class</title> <link rel="stylesheet" href="./css/element-plus.css"/> <script src="./js/vue.global.js"></script> <script src="./js/element-plus.js"></script> <style type="text/css"> .inactive{ color:#333; } .active{ color:purple; font-weight:bold; } .bg-color{ background-color: #b3d8ff; } .font-size-22{ font-size:22px; } .box{ height: 60px; border:1px solid #ccc; margin-bottom:10px; padding:10px; } </style> </head> <body> <div id="app"> <el-divider content-position="left">字符串</el-divider> <el-row class="box" :class="className">{{className}}</el-row> <el-button type="primary" @click="changeClassName">切换类名</el-button> <el-divider content-position="left">数组</el-divider> <el-row class="box" :class="[class1,class2]">{{class1}},{{class2}}</el-row> <!-- 等价于 --> <el-row class="box" :class="classArr">{{class1}},{{class2}}</el-row> <!-- 数组中使用三元表达式根据isClass3的值来决定是否添加class3--> <el-row class="box" :class="[class1,class2,isClass3?class3:'']">{{class1}},{{class2}},{{class3}}</el-row> <!-- 数组中使用对象来更灵活地控制class的添加 --> <el-row class="box" :class="[{'bg-color':true},'font-size-22',{'active':isActive}]">{{class1}},{{class2}},{{class3}}</el-row> <!-- 等价于 --> <el-row class="box" :class="[{[class1]:true},class2,{[class3]:isActive}]">{{class1}},{{class2}},{{class3}}</el-row> <el-divider content-position="left">对象</el-divider> <el-row class="box" :class="{[class1]:true,[class3]:isClass3}">{{class1}},{{class3}}</el-row> <!-- 等价于 --> <el-row class="box" :class="{'bg-color':true,'active':isClass3}">{{class1}},{{class3}}</el-row> <el-row class="box" :class="classObj">{{class1}},{{class3}}</el-row> <el-divider content-position="left">函数</el-divider> <el-row class="box" :class="getClassObj()">{{class1}},{{class2}}</el-row> <el-row class="box" :class="getClassArr()">{{class1}},{{class2}}</el-row> </div> </body> <script> const {createApp}=Vue; const app=createApp({ data(){ return{ className:'active',// 初始化为'active'类 class1:'bg-color', class2:'font-size-22', class3:'active', classArr:['bg-color','font-size-22'], isClass3:true,//控制是否添加class3 isActive: true, // 控制是否添加 'active'类 classObj:{ 'bg-color':true, active:true } } }, methods:{ changeClassName(){ // 点击时切换类名 this.className=this.className==='active'?'inactive':'active' }, getClassObj(){ return{ 'bg-color':true, active:!this.isActive, 'font-size-22':true } }, getClassArr(){ return [this.class1,this.class2]; } } }) app.use(ElementPlus); app.mount('#app'); </script> </html>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPvue动态绑定 style 的丰富案例543.21KB8月前
    ZIPPC端 html + css + 原生js 实战-手机商城1.83MB8月前
    ZIPAe 动画入门实例-平行世界特效20.33MB8月前
    ZIP米游社表情包大全(可下载).zip299.58KB8月前
    ZIP截图工具离线11111111111114.11MB8月前
    ZIP信息办公学生课绩管理系统 jsp + servlet + javaBean + sql-server-scm.zip536.65KB8月前
    ZIP新技术天地JSP+JAVABEAN+MYSQL新闻发布v1.01.29MB8月前
    ZIPwatch和computed的区别经典案例544KB8月前