首页 > 其他分享 >vuejs从入门到精通——Vue语法——Class 与 Style 绑定

vuejs从入门到精通——Vue语法——Class 与 Style 绑定

时间:2023-01-28 22:34:39浏览次数:42  
标签:Style Vue const vuejs 绑定 error ref class isActive

Class 与 Style 绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表内联样式(称为行内样式、行间样式,是通过标签的Style属性来设置)。因为classstyle都是 attribute,我们可以和其他 attribute 一样使用v-bind将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue 专门为classstylev-bind用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。

一、绑定 HTML class

1.1、绑定对象

我们可以给 :class( v-bind:class 的缩写 )传递一个对象来动态切换 class:

<div :class="{ active: isActive }"></div>

上面的语法表示active是否存在取决于数据属性isActive的真假值。

:class指令也可以和一般的classattribute 共存。

const isActive = ref(true)
const hasError = ref(false)

举下这个例子:

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

渲染的结果:

<div class="static active"></div>

isActive或者hasError改变时,class 列表会随之更新。举例来说,如果hasError变为true,class 列表也会变成"static active text-danger"

绑定的对象并不一定需要写成内联字面量的形式,也可以直接绑定一个对象:

const classObject = reactive({
  active: true,
  'text-danger': false
})
<div :class="classObject"></div>

这也会渲染出相同的结果。我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧:

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))
<div :class="classObject"></div>

  

   

 

 

标签:Style,Vue,const,vuejs,绑定,error,ref,class,isActive
From: https://www.cnblogs.com/zuoyang/p/17071401.html

相关文章

  • vuejs从入门到精通——Vue语法——属性绑定(v-bind)
    属性绑定(v-bind)动态的绑定一个或多个attribute,也可以是组件的prop。缩写::或者.(当使用.prop修饰符)期望:any(带参数)|Object(不带参数)参数:attrOrProp(可选的)修饰......
  • vue 3.x基础入门:vue 的指令与过滤器
    前置基础知识:​​Vue3.0入门:基本使用以及vue的调试工具​​文章目录​​一、vue的指令与过滤器​​​​1.1指令的概念​​​​1.2内容渲染指令​​​​v-text​​​​{{}......
  • Vue.js项目实战教程:智慧学成数据展示平台
    Vue作为前端框架三巨头之一,以其轻量易用著称,纵观它的整个发展也是极其迅速的。在前端的开发中,Vue已经成为每个前端开发者的必须掌握的技能。 下面播妞就来带大家用一篇文章......
  • VS Code保存后自动格式化Vue代码
      在VSCode里面编辑Vue代码,通常我们会安装插件Vetur,本次介绍的格式化代码也依赖于Vetur插件。具体见一下步骤注:VSCode版本为1.74.3   1.安装插件Vetur ......
  • Vue在子组件中修改Props的几种情况
    首先列举平常使用Vue父组件传递数据到子组件的几种情况传递的是基础数据类型(Number,Boolean,String)传递的是引用类型(Object,Array)结论当传给子组件的Prop为基本数据类......
  • Vue3数据对接报错(Unhandled error during execution of render function )
    如图:、 意思就是说:多了个value,在渲染div的时候,一些部分不应该有value查看一下传输数据的时候中间是否有null值的,或者无效值 ......
  • 直播程序,Vue input输入框回车以后自动刷新页面
    直播程序,Vueinput输入框回车以后自动刷新页面解决方案: 可以在标签上添加@submit.native.prevent。 <el-formlabel-position="top"size="mini":inline="true":d......
  • Vue 简介
    一、Vue是什么一套用于构建用户界面的渐进式1Javascript框架渐进式:Vue可以自底向上逐层的应用,简单应用:只需要一个轻量的核心库,复杂应用:引入各式各样的的Vue插件。二、......
  • 感受Vue3的魔法力量
    作者:京东科技牛至伟近半年有幸参与了一个创新项目,由于没有任何历史包袱,所以选择了Vue3技术栈,总体来说感受如下:•setup语法糖<scriptsetuplang="ts">摆脱了书写声明式的......
  • 感受 Vue3 的魔法力量
    ​  作者:京东科技牛至伟近半年有幸参与了一个创新项目,由于没有任何历史包袱,所以选择了Vue3技术栈,总体来说感受如下:•setup语法糖<scriptsetuplang="ts">摆脱了书......