假设这是 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的双向绑定原理及实现

    1.vue的实现原理 vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属 ...

  2. pypi 清华镜像使用帮助

    清华镜像 地址 https://mirrors.tuna.tsinghua.edu.cn/help/pypi/ 临时使用 pip install -i https://pypi.tuna.tsingh ...

  3. VS2017 IDE 说明

  4. 微信公众号号开发(Java)

    参考:http://www.cnblogs.com/fengzheng/p/5023678.html http://www.cnblogs.com/xdp-gacl/p/5151857.html 一: ...

  5. Python_013(面向对象概念)

    一.面向对象 1.面向对象几个概念问题: a:类:具有相同属性和技能的一类事物.用代码表示就是,我类里面有一些静态变量和方法是大家共有的; b:对象:具体的类的表现.在代码中就是,调用类的方法或变量传 ...

  6. BeautifulSoup笔记

    ## find_all的使用: 1. 在提取标签的时候,第一个参数是标签的名字.然后如果在提取标签的时候想要使用标签属性进行过滤,那么可以在这个方法中通过关键字参数的形式,将属性的名字以及对应的值传进 ...

  7. 关于JS的面向对象的思考和总结

    面向对象编程的概念和原理 1.面向对象编程是什么 它是用抽象的方式创建基于现实世界模型的编程模式(将数据和程序指令组合到对象中) 2.面向对象编程的目的 在编程中促进更好的灵活性和可维护性,在大型软件 ...

  8. .NET Core:目录

    ylbtech-.NET Core:目录 1.返回顶部 1. https://dotnet.microsoft.com/ 2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部   ...

  9. ADO.NET-EF:ADO.NET Entity Framework 百科

    ylbtech-ADO.NET-EF:ADO.NET Entity Framework 百科 ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 ...

  10. javaSE javaEE javaME的区别、有什么不同?

    http://zhidao.baidu.com/link?url=oFEPOmW8BnQ0M0w0krS9DyMA5UCUufgHJWV45r9UQZ-0vp_IOx-Yl-VV0hZQ-vHXGYo ...