【Vue】动态设置元素类以及样式

这篇具有很好参考价值的文章主要介绍了【Vue】动态设置元素类以及样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue2 动态设置元素类以及样式

1.动态设置类 class

1.1 字符串语法

通过v-bind绑定元素的class属性,为其指定一个字符串:

<div v-bind:class="className">class动态绑定</div>
<script>
export default {
  data() {
    return {
      className: 'app'
    }
  }
}
</script>

此时我们可以通过改变className变量来切换样式。注意,当className'' 时,这个class属性仍然会被添加到真实DOM上,只不过没有值。

1.2 对象语法

通过v-bind绑定元素的class属性,为其指定一个对象:

<div v-bind:class="{active: isActive}">class动态绑定</div>
<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

在上面的例子中,这个元素身上的class属性是否包含active,取决于数据isActive的值。当isActivetrue时,渲染结果如下:

<div class="active">class动态绑定</div>

而当我们动态修改isActive的值时,该元素的class属性也会动态更新,将值改为false

<div class>class动态绑定</div>

进一步地,对象中可以传入多个className

<div v-bind:class="{active: isActive, danger: isDanger}">class动态绑定</div>
<script>
export default {
  data() {
    return {
      isActive: true,
      isDanger: true
    }
  }
}
</script>

此时的渲染结果为:

<div class="active danger">class动态绑定</div>

当然,v-bind绑定的class属性也可以与普通的class并存:

<div class="common" v-bind:class="{active: isActive, danger: isDanger}">class动态绑定</div>
<script>
export default {
  data() {
    return {
      isActive: true,
      isDanger: true
    }
  }
}
</script>

此时渲染结果为:

<div class="common active danger">class动态绑定</div>

另外,当需要动态绑定的className太多时,不需要内联定义在模板中,此时可以选择在data中定义一个对象,或使用计算属性

<div class="common" v-bind:class="classObj1">class动态绑定 --- data中定义对象</div>
<div class="common" v-bind:class="classObj2">class动态绑定 --- 计算属性</div>
<script>
export default {
  data() {
    return {
      isActive: true,
      isDanger: true,
      classObj1: {
        active: true,
        danger: true
      }  
    }
  },
  computed: {
    classObj2() {
      return {
        active: this.isActive,
        danger: this.isDanger
      }
    }
  }
}
</script>
1.3 数组语法

通过v-bind绑定元素的class属性,为其指定一个数组:

<div v-bind:class="[className, 'common']"></div>
<script>
export default {
  data() {
    return {
      className: 'app'
    }
  }
}
</script>

此时的渲染结果:

<div class="common app"></div>

使用数组,里边的值可以是响应式的也可以是普通类名,同时也可以使用三元表达式,甚至可以结合上面的对象语法使用:

<div v-bind:class="[className, 'common', isActive ? 'active': '', { danger: isDanger }]"></div>
<script>
export default {
  data() {
    return {
      className: 'app',
      isAcive: true,
      isDanger: true,
    }
  }
}
</script>

2.动态绑定样式 Style

2.1 字符串语法

通过v-bind绑定元素的style属性,为其指定一个字符串:

<div v-bind:style="style">style动态添加</div>
<script>
export default {
  data() {
    return {
      style: 'color: red'
    }
  }
}
</script>
2.3 对象语法

通过v-bind绑定元素的style属性,为其指定一个对象,对象语法十分直观 —— 看着非常像 CSS,但其实是一个js对象。CSS 名可以用驼峰式短横线分隔 (记得用引号括起来) 来命名。:

<div v-bind:style="{ color: color, fontSize: fontSize + 'px', (padding-left): paddingLeft }"></div>
<script>
export default {
  data() {
    return {
      style: 'red',
      fontSize: 30,
      paddingLeft: '10px'
    }
  }
}
</script>

既然可以使用对象语法,那么同样的,style也可以data中定义一个对象或者使用计算属性

2.3 数组语法

通过v-bind绑定元素的style属性,为其指定一个数组,数组中可以为多个样式对象:文章来源地址https://www.toymoban.com/news/detail-680697.html

<div v-bind:style="[styleObj, overridingStyles]"></div>
<script>
export default {
  data() {
    return {
      color: 'red',
      fontSize: '30px',
      overridingStyles: {
        color: 'blue',
        fontSize: '40px'
      }
    }
  },
  computed: {
    styleObj() {
      return {
        color: this.color,
        fontSize: this.fontSize
      }
    }
  }
}
</script>

到了这里,关于【Vue】动态设置元素类以及样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】在el-table的el-table-column中,如何控制单行、单列、以及根据内容单独设置样式。例如:修改文字颜色、背景颜色

    用cell-style表属性来实现。在官网中是这样表述这个属性的。    在el-table中用v-bind绑定此属性。(v-bind的简写是:) data中的options数据为: 此时页面显示为:     在methods中声明cellStyle方法。让我们打印出各个参数看一下代表了什么。 控制台打印如下:     其实很好理解,

    2024年02月15日
    浏览(59)
  • vue - 动态绑定ref(使用变量)以及获取方式,解决v-for循环嵌套自定义子组件时无法this.$refs.xx找到动态组件的情况(详细示例教程)适合 vue.js nuxt.js uniapp

    正常情况,我们需要在vue中获得某个dom或者组件,我们会通过绑定 ref 然后通过绑定后的名字来获取这个dom 。 但是,如果我们在v-for中绑定ref的话,那么这个ref就会存在多个,比如我们点击事件让对应的显示/隐藏的话,我们很难找到这个对应的元素。 那么,这时我们需要动

    2024年02月13日
    浏览(53)
  • vue中实现div可编辑,并插入指定元素,样式

    前言:         vue中实现一个既可以编辑内容,有可以动态编辑内容插入一个带有样式的内容,改变默认内容后,这个样式消失的效果,这里来整理下调研与解决实现问题之路。 1、可以光标点击任意地方,然后点击按钮,插入带有span的内容 2、默认span是有样式,但是一旦内

    2024年02月10日
    浏览(41)
  • 微信小程序通过js动态修改css样式的方法,以及css变量

    不知道各位小帅有没有遇到这种问题,在微信小程序开发的时候,我们想要将某个文字大小变大,那么本篇文章就是解决这个问题。

    2024年02月06日
    浏览(54)
  • 【vue】Vue中class样式的动态绑定

    简介: Vue 中 class 样式的绑定 1、字符串写法 使用场景 :样式的类型不确定 写法: 手动触发样式改变 注意:字符串使用的是vue实例data中已有的属性 2、对象写法 使用场景 :样式个数、类名确定,通过Bollean动态展示与否 写法: 对象写在内联样式 对象写在data中 3、数组写法

    2024年02月15日
    浏览(38)
  • Vue3动态样式

    我们准备一个简单的 Vue3 项目,并写两个页面: Home : About 页面: 效果如下: 记得添加路由。添加好之后,我们点击加1按钮,看看会发生什么? 首先来看下我们做的事情: 我们定义了几个响应式数据,其中有个 colorRef ,它会根据 count 变量是奇数还是偶数来改变颜色。 我

    2024年02月02日
    浏览(40)
  • vue中动态添加样式

    在vue.js中可以动态的添加class样式和style样式 其中class样式和style样式分别都有对象和数组两种写法 详见代码如下  

    2024年02月14日
    浏览(40)
  • javaScript与vue获取元素的方法

    目录 javaScript 1 根据ID获取 2 根据标签名获取 3 通过HTML5新增的方法获取 vue获取元素及兄弟元素,父级元素 get 获得 element 元素 by 通过 返回的是一个元素对象 document.getElementById(\\\'ID\\\'); get 获得 element 元素 by 通过 Tag标签 Name名字 返回带有指定标签名的对象的集合 以伪数组的形式

    2024年02月08日
    浏览(43)
  • javascript设置指定年月日,js动态显示当前时间

    大家好,本文将围绕js中如何动态显示日期时间展开说明,javascript设置指定年月日是一个很多人都想弄明白的事情,想搞清楚js动态显示当前时间需要先了解以下几个事情。 创建showTime()函数,利用JavaScript中的Date对象的属性及方法获取时间,利用Window对象的 setInterval() 方法按

    2024年02月03日
    浏览(146)
  • vue动态绑定style样式之动态添加style样式的多种写法

    项目中会需要动态添加 style 行内样式,现指出常用的几种方式。 注意: 1、凡是有 - 的style属性名都要变成驼峰式,比如font-size要变成 fontSize。 2、除了绑定值,其他的属性名的值要用引号括起来,比如 fontSize:\\\'14px\\\' 而不是 fontSize :14px。 对象形式 data(){ return { baseStyles: { width:

    2024年04月17日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包