vue快速入门(十八):class动态绑定类名

注释很详细,直接上代码

上一篇

新增内容

  1. 动态绑定类名的常用方法
  2. 动态绑定类名的注意点
    源码
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .style_0{
      height: 200px; 
      width: 200px;
      background-color: antiquewhite;
    }
    .style_1{
      background-color: aqua;
    }
    .style_2{
      border: red 5px solid;
    }
  </style>
</head>

<body>
  <!-- 挂载点 -->
  <div id="root">
    <!-- 动态绑定类样式(前面的冒号是必须的)
      :class="{ style_1: isStyle_1, style_2: isStyle_2 }" 
      注意即使是动态绑定也要考虑优先级-->
    <div :class="{style_1:isStyle_1,style_2:isStyle_2}" 
    class="style_0"></div>
  </div>
    <!-- 导入vue的js代码:不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据
          isStyle_1: false,
          isStyle_2: false
        },
        methods: {// 方法
        }
      })
    </script>
</body>

</html>

效果演示

相关推荐
牧杉-惊蛰37 分钟前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木1 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
FuckPatience1 小时前
前后端分离项目部署完成后 前后端交互过程
vue.js·asp.net
CoderYanger1 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
赛博切图仔1 小时前
qiankun、micro-app、wujie,2025年我们该选谁?
前端·javascript
LuckySusu1 小时前
【vue篇】Vue 自定义指令完全指南:从入门到高级实战
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 响应式核心:依赖收集机制深度解密
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue.js 2025:为何全球开发者都在拥抱这个前端框架?
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 单向数据流铁律:子组件为何不能直接修改父组件数据?
前端·vue.js
LuckySusu1 小时前
【vue篇】React vs Vue:2025 前端双雄终极对比
前端·vue.js