如何在 VueJS 的组件中创建动态类值？答案

【问题标题】：How to create a dynamic class value in a component in VueJS?如何在 VueJS 的组件中创建动态类值？
【发布时间】：2017-06-28 12:09:11
【问题描述】：

所以我创建了一个简单的组件：

Vue.component('m-textbox', {
  template: `
   <div>
    <div class="input-field col s12 m6 l6">
      <input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">
      <label :for="id">{{ label }}</label>
    </div>
   </div>
  `,
  props: ["id", "value", "label", "for"]
})

我在我的 html 中这样使用它：

<m-textbox v-model="full_name" id="full_name" label="Full Name"></m-textbox>

现在我想做的是使列可设置。如您所见，默认值为col 12 m6 l6。有没有办法让它动态化？比如我可以做<m-textbox v-model="full_name" id="full_name" label="Full Name" classSize="col s12 m6"></m-textbox>。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

希望它应该非常简单。不确定语法是否正确，因为我使用的是 webpack 和单文件组件，如果语法有问题，请见谅。

一种方式：

Vue.component('m-textbox', {
  template: 
   `<div>
    <div :class="size">
      <input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">
      <label :for="id">{{ label }}</label>
    </div>
   </div>`
  ,
  props: ["id", "value", "label", "for", 
           size: 
           { type: 'string', default: 'input-field col s12 m6 l6'}]
})

其他方式：

Vue.component('m-textbox', {
  template: 
    `<div class="input-field">
      <input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">
      <label :for="id">{{ label }}</label>
    </div>`
  ,
      props: ["id", "value", "label", "for"]
    })

并使用它： <m-textbox v-model="full_name" id="full_name" label="Full Name" v-bind:class="[col, s12, m6]"></m-textbox>

【讨论】：

我得到一个无效的表达式：:class="col s12 m6"
已修复。你必须使用 v-bind 和 []
接受答案而不是正确的，以便其他人可以找到它

【解决方案2】：

您可以删除组件模板中的外部 div 并简单地将 class 属性添加到组件中。它甚至会合并你的类。

Vue.component('m-textbox', {
  template: `
    <div class="input-field col">
      <input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">
      <label :for="id">{{ label }}</label>
    </div>
  `,
  props: ["id", "value", "label", "for"]
})

<m-textbox v-model="full_name" id="full_name" label="Full Name" class="s12 m6 l6"></m-textbox>

【讨论】：