class 和 style 绑定的高级用法

最新推荐文章于 2023-03-06 19:21:25 发布
最新推荐文章于 2023-03-06 19:21:25 发布
阅读量95 收藏
点赞数
分类专栏： web前端 vue 文章标签： vue css vue.js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjswangjinsheng/article/details/115327337
版权

class 和 style 绑定的高级用法

<html>
  <head>
    <title>class 和 style 绑定的高级用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div :class="['active', 'normal']">数组绑定多个class</div>
       <div :class="(isActive?'active':'')+'normal'">数组绑定多个class</div>
      <div :class="[{active: isActive}, 'normal']">数组包含对象绑定class</div>
      <div :class="[showWarning(), 'normal']">数组包含方法绑定class</div>
      <div :style="[warning, bold]">数组绑定多个style</div>
      <div :style="[warning, mix()]">数组包含方法绑定style</div>
      <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">style多重值</div>
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            isActive: true,
            warning: {
              color: 'orange'
            },
            bold: {
              fontWeight: 'bold'
            }
          }
        },
        methods: {
          showWarning() {
            return 'warning'
          },
          mix() {
            return {
              ...this.bold,
              fontSize: 20
            }
          }
        }
      })
    </script>
  </body>
</html>
wangjinsheng593
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue Class 与 Style 绑定
weixin_62141813的博客
05-17 411
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class 语法格式: 使用方式：v-bind:class="expression" expr
vue计算属性+vue中class与style绑定(推荐)
10-15
#### Style绑定 1. **对象语法**：和`class`绑定类似，你可以提供一个对象，键是样式属性，值是样式值。 ```html <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> ``` 2. **数组语法...
Vue:style和class绑定的高级用法
qq_42892491的博客
04-02 250
Vue:style和class绑定的高级用法class绑定的高级用法第一种 数组绑定多个class第二种 数组包含对象绑class第三种 数组包含方法绑定classstyle绑定的高级用法第一种 数组绑定多个style第二种 数组包含方法绑定style class绑定的高级用法 第一种 数组绑定多个class <div :class="['active','normal']">数组绑定...
class和style的使用
08-19 613
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>class和style</title> <script src="https://cdn.jsdelivr
Vue的class和style绑定
阳光下的冷静的博客
03-17 310
在应用界面中个，某个(些)元素的样式是变化的，使用vue的class/style绑定就是专门用来实现动态样式效果的绑定 class绑定 1 :class=‘xxx’ 2 表达式是字符串: ‘classA’ 3 表达式是对象: {classA:isA, classB: isB} 4 表达式是数组: [‘classA’, ‘classB’] style绑定 :style="{ color: a...
class与style绑定
leva的博客
10-09 538
这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?类名active依赖于数据isActive，当其为true时，div会拥有类名active的样式，为false时，则没有，所以“对象语法”存在1px的黑色边框。大多数情况下，直接写一长串的样式不便于阅读和维护，因此实际的开发中往往是写在data或者computed计算属性里。特别强调一点，动态绑定的 class 可以与普通的class共存，在浏览器中运行，显示效果。
vue之class与style绑定
weixin_52129860的博客
03-06 473
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。动态的绑定与修改。知识点元素的 class 对象语法绑定元素的 class 数组语法绑定元素的 style 对象语法绑定元素的 style 数组语法绑定。
vue class和style的动态绑定举例
小哈力----一个小前端工程师
04-16 653
vue class和style的动态绑定举例 文章目录vue class和style的动态绑定举例概述class的绑定对象语法数组语法style的绑定对象语法数组语法完整demo官网链接 概述 此文章依据官网进行自我整理总结，便于工作中进行直接代码复用。 class的绑定 对象语法 可以用于通过变量来控制class添加与否 <div :class="{active: isActive,‘bigFz’:isBigFz}"> isActive 为true时添加 数组语法 可以用于添加多个动态clas
Vue——Class和Style绑定
程序媛-jjl的博客
12-21 480
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定HTML
Vue Class与Style绑定
橘猫吃不胖的博客
12-03 704
Vue Class与Style绑定 1 Class绑定 1.1 字符串写法 1.2 数组写法 1.3 对象写法 2 Style绑定 2.1 对象写法 2.2 数组写法
Vue的Class与Style绑定的方法
08-29
Vue 的 `v-bind:class` 和 `v-bind:style` 绑定提供了一种灵活的方式来动态地控制元素的样式和类，使得代码更具响应性和可维护性。无论是对象语法还是数组语法，都能满足复杂场景下的需求，让开发者更专注于业务逻辑...
详解vue.js之绑定class和style的示例代码
10-19
yleBind', data: { theColor: 'blue', theSize: 16 }, methods: { bigger: function() {...通过以上示例，你将能够熟练掌握在Vue.js中如何使用v-bind指令来实现class和style的动态绑定，从而更好地控制组件的视觉表现。
学习vue.js中class与style绑定
11-26
在Vue.js中，`class`和`style`的绑定是数据绑定的一种常见需求，它允许我们根据组件的状态动态地改变元素的样式。Vue.js提供了`v-bind`指令来实现这一功能，大大增强了模板的灵活性。 首先，让我们看下`v-bind:...
vue绑定class与行间样式style详解
08-29
Vue 绑定 Class 与行间样式 Style 详解 Vue 是一个流行的前端框架，提供了强大的绑定机制来控制 HTML 元素的样式。...Vue 提供了多种方式来绑定 Class 和行间样式 Style，这些方式可以灵活地应用于不同的开发场景中。
Vue 前端页面按钮权限控制
热门推荐
wjswangjinsheng的博客
07-23 1万+
前言 按钮权限控制的功能其实在前面的一篇的页面权限管理也包含有这个功能，但是没有凸显出来，所以现在单独写一篇文章用来记录一下 一、什么是按钮权限控制？ 刚刚做完了一个后台管理系统，有用到按钮权限控制，所以记录一下。按钮权限控制就是说对于不同的用户，可操作的按钮是不一样的，比如有些按钮有些用户是看不见，有些用户是可以看得见的。应用场景：用户A能看得到‘新增’按钮，而用户B是看不到‘新增’按钮的 二、使用步骤 按钮权限控制，我知道的有两种解决方案:1.定义一个全局方法,配合v-if实现（下面会介绍）;2.使用
Vue $emit 和 $on的用法
wjswangjinsheng的博客
03-30 7457
一、$emit 1、this $emit（‘自定义事件名’,要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； 二、$on 1、this.on(′事件名′,callback)callback回调on('事件名',callback) callback回调on(′事件名′,callback)callback回调emit要传送的数据； 2、监听当前实例上自定义事件； 三、实例 <html> <head> <title>$emit 和 $on&l
vue+vant 购物车的全选和反选
wjswangjinsheng的博客
06-10 6379
这是效果图: 话不多少,直接上代码: <template> <div class="cart"> <div class="st-spacing-main" v-for="(item) in cartInfoList" :key="item.id"> <div class="st-item product-item"> ...
less自定义变量以及全局使用，scss的全局使用
wjswangjinsheng的博客
07-13 6109
1.在assets文件夹下创建–>base–>variable.less,如下 //这些都是less的自定义变量,都在可以全局使用 @data-color-cyan: #70FFE1; @data-color-green: #00D08F; @data-color-orange: #FA6400; @user-state-orange: #FE824C; @big-size: 30p...
vue中如何动态绑定style和class
最新发布
05-13
在Vue中，可以使用 `v-bind` 指令来动态绑定 `style` 和 `class`。 1. 绑定 `style` 可以使用以下方式来动态绑定 `style`：...以上是Vue中动态绑定 `style` 和 `class` 的基本用法，你可以根据自己的需求来进行扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值