Javascript 如何从Vue中的html代码中清除v-bind指令？

好的，我有一些Vue代码和HTML

例如：

Vue.component('area-selectors-box', {
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector>
    </div>
  `,
  props:['selects']
});

在页面上，源的计算结果如下：

<option area="[object Object]" value="82">Europa</option>

Europa

这显然是不可取的

---

如何绑定这些属性而不将它们作为属性出现在DOM中？

默认情况下，当

v-bind

遇到与目标上的属性不关联的绑定名称时，该值将转换为字符串并指定为属性。由于

没有名为

area

的属性，因此对象被指定为字符串属性，这是您在DOM中观察到的

可以使用始终将其指定为属性：

Vue.component（'area-selectors-box'{
模板：`
`,
道具：[“选择”]
});
Vue.组件（'区域选择器'{
模板：`
{{selection}}
`,
道具：[“选择”]，
数据（）{
返回{
选择：空，
}
}
})
Vue.组件（“区域选项”{
模板：`{area.name}}`
，道具：[“区域”]
});
新Vue({
el:“#应用程序”，
数据：（）=>({
选择：[
{id:1，选项：[
{id:10，区域：{term_id:100，名称：'欧洲'}，
{id:11，区域：{term_id:101，名称：'Asia'}，
]
},
{id:2，选项：[
{id:20，地区：{term_id:200，名称：'北美'}，
{id:21，地区：{term_id:201，名称：'南美洲'}，
]
},
]
}),
})

---

我自己的答案是：调用组件时传递道具，而不是组件本身。此代码将工作并生成干净的html：

在HTML页面中：

Vue.component('area-selectors-box', { // pass select to area-selector
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector> 
    </div>
  `,
  props:['selects']
});

Vue.component('area-selector', { // pass area to area-option
  template: `
    <select @change="selected" >
      <option disabled selected value="">Seleziona continente</option>
      <area-option v-for="area in select.areas" :area="area" :key="area.term_id"></area-option>
    </select>
  `
  ,props:['select']
});

Vue.component('area-option', { // pass nothing
  template: `<option :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});

JS:

Vue.component（'area-selectors-box'，{//pass select to area selector
模板：`
`,
道具：[“选择”]
});
Vue.component（'area-selector'，{//pass area-to-area选项
模板：`
塞莱兹亚纳大陆
`
，道具：[“选择”]
});
组件（'area-option'，{//不传递任何内容
模板：`{area.name}}`
，道具：[“区域”]
});

“我想这是不符合标准的”

<option area="[object Object]" value="82">Europa</option>

<!-- pass selects to area-selectors-box -->
<div is="area-selectors-box" :selects="selects"></div>

Vue.component('area-selectors-box', { // pass select to area-selector
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector> 
    </div>
  `,
  props:['selects']
});

Vue.component('area-selector', { // pass area to area-option
  template: `
    <select @change="selected" >
      <option disabled selected value="">Seleziona continente</option>
      <area-option v-for="area in select.areas" :area="area" :key="area.term_id"></area-option>
    </select>
  `
  ,props:['select']
});

Vue.component('area-option', { // pass nothing
  template: `<option :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});