vue.js双向数据绑定实现checkbox选中操作

• 方式
• 代码
• 设置style不换行

方式

表单输入绑定

通过 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。真的很神奇：）

理解：通过v-model的数据改变，从而实现<input>视图改变。

代码

• demo 实现数据与视图的绑定

  <template>
    <div class="app-container">
      <el-button type="primary" @click="hanleCheckWeixin">选中微信</el-button>
      <el-button type="primary" @click="hanleCheckEmail">选中邮件</el-button>
      <el-button type="primary" @click="handleCheckAll">全选</el-button>
  
      <div>
        <input id="weixin" v-model="checkedNotifiers" type="checkbox" value="weixin">
        <label for="weixin">微信</label>
        <input id="email" v-model="checkedNotifiers" type="checkbox" value="email">
        <label for="email">邮件</label>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        checkedNotifiers: []
      }
    },
  
    methods: {
      hanleCheckWeixin() {
        // 选中微信，只有把v-model的checkedNotifiers设置为weixin即可（与value值相对应）
        this.checkedNotifiers = ['weixin']
      },
      hanleCheckEmail() {
        this.checkedNotifiers = ['email']
      },
      handleCheckAll() {
        this.checkedNotifiers = ['weixin', 'email']
      }
    }
  }
  </script>
  

设置style不换行

style="display: inline-block; width: 15%;" 设置div里面的svg-icon不换行，间距为15%

<div v-for="(notify) in scope.row.notifiers" :key="notify" style="display: inline-block; width: 15%;">
   <svg-icon v-if="notify == 'email_configs'" style="width:100%" icon-class="email" class="meta-item__icon" />
    <svg-icon v-if="notify == 'internal_api_configs'" style="width:100%" icon-class="wechat" class="meta-item__icon" />
</div>