假设这是 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. LeetCode--044--通配符匹配(java)*

    给定一个字符串 (s) 和一个字符模式 (p) ,实现一个支持 '?' 和 '*' 的通配符匹配. '?' 可以匹配任何单个字符. '*' 可以匹配任意字符串(包括空字符串). 两个字符串完全匹配才算 ...

  2. re模块的高级使用

    主要有四个方法: search : 从字符串的任意位置开始检索,首次匹配即结束 findall : 全部匹配 sub : 将正则匹配结果进行替换 split : 根据正则匹配结果将字符串进行切分,然后 ...

  3. python之requests模块中的params和data的区别

    params的时候之间接把参数加到url后面,只在get请求时使用: import requests url='https://api.ireaderm.net/account/charge/info ...

  4. CodeChef Max-digit Tree(动态规划)

    传送门. 题解: 最主要的问题是如何判断一个数是否合法,这就需要发现性质了. 这个状态划分还是不太容易想到, 每次加的数\(∈[0,k)\),也就是个位一直在变变变,更高的位每次都是加一,这启发我们状 ...

  5. C# 与 C++,语法差别有多小-第二章 C++浏览

    (一)动态内存分配和指针 C++:new  和 delete                                  int *arr = new int[ 4 ]; C#:只有new,de ...

  6. 20180715-Java String类

    public class StringDemo{ public static void main(String args[]){ char[] helloArray = {'h','e','l','l ...

  7. [CSP-S模拟测试]:棋盘(数学+高精度)

    题目描述 在一个大小为$N\times N$的棋盘上,放置了$N$个黑色的棋子.并且,对于棋盘的每一行和每一列,有且只有一个棋子.现在,你的任务是再往棋盘上放置$N$个白色的棋子.显然,白色棋子不能与 ...

  8. noi.ac #712 练级

    分析 把船当作点 练级当作边 发现一个连通块大于n-1的边的条数的奇偶性影响这个连通块的答案 于是并查集维护即可 代码 #include<bits/stdc++.h> using name ...

  9. 【转】 C语言深度解剖读书笔记(1.关键字的秘密)

    本文出处:http://blog.csdn.net/mbh_1991/article/details/10149805 开始本节学习笔记之前,先说几句题外话.其实对于C语言深度解剖这本书来说,看完了有 ...

  10. Linux 中设置进程通过 systemctl 启动

    对于某些脚本或需要启动命令的程序,可以通过创建 xx.service 服务文件来使用 systemctl 控制. 例如,对于 docker-compose,其后台启动且忽略输出信息的命令为: $ no ...