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>

效果演示

相关推荐
新中地GIS开发老师33 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang40 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。40 分钟前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。41 分钟前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡41 分钟前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm