假设这是 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. php array_combine()函数 语法

    php array_combine()函数 语法 作用:通过合并两个数组来创建一个新数组,其中的一个数组是键名,另一个数组的值为键值.dd马达价格 语法:array_combine(keys,valu ...

  2. php中魔术方法有什么用

    在面向对象编程中,PHP提供了一系列的魔术方法,这些魔术方法为编程提供了很多便利.PHP中的魔术方法通常以__(两个下划线)开始,并且不需要显示的调用而是由某种特定的条件出发. __construct ...

  3. Ckeditor IE下粘贴word中图片问题

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  4. UE4 命令行打开工程

    创建快捷方式,目标填写: D:\EpicGames\4.14\Engine\Binaries\Win64\UE4Editor.exe "D:\YourProjectPath\YouProje ...

  5. 虚拟机安装linux遇到的问题

    1.运行 yum -y update,提示没有权限,改为sudo yum  -y update后,提示没有已启用的仓库.网上查找发现没有yum的库,然后开始安装yum. sudo apt-get in ...

  6. git 时 出现 Permission denied (publickey).

    https://blog.csdn.net/awp0011/article/details/73368481 第一次使用github.com在本地 执行 git clone git@github.co ...

  7. 测开之路七十六:性能测试蓝图之html

    <!-- 继承base模板 -->{% extends 'base.html' %} {% block script %} <!-- 从cdn引入ace edter的js --> ...

  8. Vi 常用命令列表

    基本上vi可以分为三种状态,分别是命令模式(command mode).输入模式(Insert mode)和末行模式(last line mode),各模式的功能区分如下: 1) 命令模式(comma ...

  9. django初学---基本目录结构-配置html页面显示步骤

    extra_apps 存放第三方应用,包,源码 apps -- 存放内部应用 static --存放CSS文件,JS文件,图片文件等待 media -- 存放系统里允许用户上传的图片或者文件 requ ...

  10. 11 (H5*) js第1天 基本数据类型、变量

    目录 1:  js的介绍 2:写js代码注意的地方 3:变量 4:变量的命名和作用 5:变量的类型 6:Number类型 7:string类型 8:类型转换 9:操作符号 复习 <script& ...