vue 中 v-bind 合并行为

v-bind 的绑定顺序会影响渲染结果。

常见的场景是在一个元素中同时使用 v-bind="object" 语法绑定属性和单独绑定属性。然而，这就引出了关于合并的优先级的问题。

在 2.x，如果一个元素同时定义了 v-bind="object" 语法绑定属性和单独绑定属性，那么这个单独的属性总是会覆盖 object 中绑定的属性。

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>

在 3.x，如果一个元素同时定义了 v-bind="object" 语法绑定属性和单独绑定属性，那么声明绑定的顺序决定了它们如何合并。换句话说，现在开发者对自己所希望的合并行为有了更好的控制。

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="blue"></div><!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- result -->
<div id="red"></div>

记住：后面的覆盖前面的。代码中单独的属性中有id，然后 v-bind 绑定的属性对象中也有 id 了，两个 id 相同的时候，后面的会覆盖前面的。

vue 中 v-bind 合并行为相关推荐

vue中表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头.vue-split-ta ...
Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
bind merge r 和join_R语言中的数据合并函数（merge，cbind和rbind）的使用
R语言中的数据合并函数(merge,cbind和rbind)的使用-R语言中用cbind() 和rbind() 构建分块矩阵 1.merge函数两个数据框拥有相同的时间或观测值,但这些列却不尽相同. ...
vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
vue 中luckysheet实现导出
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 vue 中luckysheet实现导出文章目录 vue中luckysheet实现导出二.使用步骤 1.引入库 2.vue 组件中初 ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

vue 中 v-bind 合并行为

vue 中 v-bind 合并行为相关推荐

最新文章

热门文章