vue+element: 属性

场景：想动态决定el-input的属性show-word-limit是否使用

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.8.2/lib/index.js"></script>
<div id="app">
<el-input
  type="text"
  placeholder="请输入内容"
  v-model="textContent"
  :maxlength="textInputMaxLength"
  :show-word-limit="showWordLimit"
>
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="textareaContent"
  :maxlength="textareaInputMaxLength"
  :show-word-limit="showWordLimit"
>
</el-input>
</div>

 

CSS

@import url("//unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css");

 

JS

var Main = {
  data() {
    return {
      textContent: '',
      textareaContent: '',      
      textInputMaxLength: 50
      textareaInputMaxLength:100,
      showWordLimit: true
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')