【Vue】了解这些类和样式绑定就够了!

hello,我是小索奇,精心制作的Vue系列持续发放,涵盖大量的经验和示例,由浅入深进行讲解。 本章给大家讲解的是类和样式绑定,前面的章节已经更新完毕,后面的章节持续输出,有任何问题都可以留言或私信哈,一起加油~

类和样式绑定

其中:v-bind 的缩写)

绑定class样式

  • 写法:class="soa"soa可以是字符串、对象、数组
  • 字符串写法 :类名不确定,要动态获取
  • 对象写法 :要绑定多个样式,个数&名字也不确定
  • 数组写法 :要绑定多个样式,个数&名字确定,可以进行自定义修改

绑定 style 样式

  • 对象写法::style="{fontSize: xxx}" 其中xxx是动态值
  • 数组写法::style="[a,b]" 其中a、b是样式对象

示例

xml 复制代码
<div id="root">

  <!-- 字符串写法,适用于动态类名 -->
  <!-- 这里具体方法实现可以自定义 -->
  <div :class="color">{{name}}</div>

  <!-- 确定类名数组 -->
  <div :class="classArr">{{name}}</div> 

  <!-- 对象根据条件决定 -->
  <div :class="classObj">{{name}}</div>

  <!-- style对象 -->
  <div :style="styleObj">{{name}}</div>

  <!-- style数组 -->
  <div :style="styleArr">{{name}}</div>

</div>

<script>
const vm = new Vue({
  el: '#root',
  
  data: {
    name: '小索奇',
    color: '#9900ff',
    classArr: ['cls1', 'cls2'],
    classObj: {
      cls1: false
    },
    styleObj: {
      fontSize: '40px',
      color: '#9966ff'
    },
    styleArr: [
      { fontSize: '40px' },
      { color: '#9900ff' }
    ]
  }
})
</script>

记住一个逻辑:不变写死的可以用css定义,变化的vue定义!

:style绑定的值可以是一个对象,对象中的CSS属性名和属性值会被直接设置为元素的行内样式

这样就可以在模板中方便地切换多个样式属性,而不需要预先在CSS中定义className

当绑定的数据变化时,setStyle会响应式地更新应用到元素上

相比在CSS中预定义,:style绑定可以在运行时动态构建样式对象,非常灵活

而且:style绑定也支持绑定一个数组来应用多个样式对象~

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常4 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C4 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js