假设这是 bs-date-input 的模板:

<input type="date" class="form-control">

为了给该日期选择器插件增加一个特殊的主题,我们可能需要增加一个特殊的 class,比如:

<bs-date-input
data-3d-date-picker="true"
class="date-picker-theme-dark"
></bs-date-input>

在这个例子当中,我们定义了两个不同的 class 值:

  • form-control,来自组件自身的模板
  • date-picker-theme-dark,来自父组件

对于多数特性来说,传递给组件的值会覆盖组件本身设定的值。即例如传递 type="large"将会覆盖 type="date" 且有可能破坏该组件!所幸我们对待 class 和 style 特性会更聪明一些,这两个特性的值都会做合并 (merge) 操作,让最终生成的值为:form-control date-picker-theme-dark

总结:就是vue可以将两个class合并在一起,这样就解决了两个class会覆盖掉一个的问题

Vue:替换/合并现有的特性的更多相关文章

  1. Vue.js 3.0 新特性预览

    总结起来,Vue 3 以下方面值得我们期待 : 更快 更小 更易于维护 更多的原生支持 更易于开发使用 完整的PPT:docs.google.com/presentatio… Evan 和 Vue 团 ...

  2. vue 动态合并单元格、并添加小计合计功能

    1.效果图 2.后台返回数据格式(平铺式) 3.后台返回数据后,整理所需要展示的属性存储到(items)数组内 var obj = { "id": curItems[i].id, ...

  3. Vue插槽的另外一些特性

    之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...

  4. vue的provide和inject特性

    由来 组件之间的通信可以通过props和$emit的方式进行通信,但是如果组件之间的关系非常复杂的话,通过以上的方式会很麻烦,并且程序会非常脆弱,没有建中性可言. 在==vue2.2.0 中新增pro ...

  5. vue表格合并行的一个实例

        一.element控件实现 在平常的应用中,需要用到合并单元格的操作,在Excel中,这种操作很好实现,但在实际项目中,常常需要借助element控件来实现. 下面是element中的一个实例 ...

  6. 【vue】组件使用Deferred特性

    延迟加载组件 defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行. <template> <div> ...

  7. vue学习之组件(component)(一)

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...

  8. vue組件自学

    Vue组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...

  9. vue2.x阅读笔记

    v-once 作用: 只赋值一次 注意: 包括子项都是只赋值一次 模板 1.v-text v-html 2.{}语法 3.如果是html的属性,则用v-bind绑定,简写: 注意: 1.可以使用jav ...

随机推荐

  1. Vue项目【饿了么App】mock数据【data.json】

    1.前后端分离式开发,约定好数据字段接口! 2.前端mock静态数据,开发完毕后,与后端进行数据联调! 3.vue.config.js 配置 devServer const appData = req ...

  2. Java架构师/高并发/高可用/高扩展/性能优化/框架源码分析实战

    https://ke.qq.com/course/401944?taid=3389721334391320

  3. 攻防世界 | level2

    # ! /usr/bin/env python # -*- coding:utf-8 -*- from pwn import * context.log_level = 'debug' elf = E ...

  4. EZOJ #385 排列

    分析 对于第一问我们直接从上到下枚举所有横边 每一次交换两边的列标号即可 对于第二问我们发现答案就是最终序列的逆序对数量 代码 #include<bits/stdc++.h> using ...

  5. base64编码操作图片

    package com.trsmedia.service; import java.io.FileInputStream; import java.io.FileOutputStream; impor ...

  6. 洛谷T89644 palindrome回文串

    洛谷 T89643 回文串(并查集) 洛谷:https://www.luogu.org/problem/T89643 题目描述 由于 Kiana 实在是太忙了,所以今天的题里面没有 Kiana. 有一 ...

  7. poj2377Bad Cowtractors (最小生成树变形之——最大生成树)

    题目链接:http://poj.org/problem?id=2377 Description Bessie has been hired to build a cheap internet netw ...

  8. 腾达Tenda W311MA无线网卡Linux下驱动安装

    菜鸟看这里https://help.ubuntu.com/community/WifiD ... enda_W311M 最近也买了颗Tenda W311M网卡,简单说一下驱动的安装和hostapd做S ...

  9. html5_websql

    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  var msg;  db.transaction(function ...

  10. JavaScript.Remove

    Array.prototype.remove = function (from, to) {     var rest = this.slice((to || from) + 1 || this.le ...