vue.js - Vue2模板动态绑定attr

问题描述

问 题

在vue模板中html绑定一个attr.在以前的方法通过js拼装的代码是,

options += '<option ' + (editor.customKey
            ? 'data-' + editor.customKey + "=" + item[editor.customKey]
            : '') + ' value="' + v + '"' + (v == value
            ? " selected"
            : "") + '>' + d + '</option>';

这里面customKey是一个变量,每个option都有一个属性data-xx或者data-oo.

现在想给改成vue模板.

<option v-for="opt in col.editor.items" 
:value="opt[col.editor.value||'id']" 
:data-{{col.editor.customKey}}="col.editor.customKey">
{{opt[col.editor.display||'name']}}</option>                 

这里面:data-{{col.editor.customKey}}="col.editor.customKey"这一句是错误的,因为我不知道该怎么写.

求教此处应该如何写.

解决方案

属性名称在模板里面是不支持动态化的，如果需要，需要在 render 方法里面写，你可以看一下 Vue2 的render api。
如果用了 vue 了，一般就比较少用 data-xxx 来存值了。 建议从其他思路来解决这个问题，例如把属性名改为固定的，因为你的属性值已经是动态的了，就没必要属性名也是动态的

这篇关于vue.js - Vue2模板动态绑定attr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！