vue <input type="checkbox"> 选中取消事件

可以使用 `v-model` 绑定一个变量来实现 `checkbox` 的选中和取消操作，同时绑定一个 `@change` 事件监听器来处理状态变化。示例代码如下：

<template>
  <div>
    <input type="checkbox" v-model="isChecked" @change="handleCheck">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleCheck() {
      console.log('isChecked:', this.isChecked)
    }
  }
}
</script>

在这个示例中，`isChecked` 变量用于绑定 `checkbox` 的选中状态，`handleCheck` 方法用于处理状态变化事件，当 `checkbox` 被选中或取消时，会触发 `handleCheck` 方法，同时将 `isChecked` 变量更新为当前状态。

相关问题

vue中 <input type="checkbox"> 如何將文字與復選框關聯起來

在Vue中，如果你想将文本标签与单个复选框关联起来，通常做法是在`<label>`标签内包裹`<input type="checkbox">`元素，并将`for`属性设置为与`id`属性相匹配，这样点击标签内容会自动切换复选框的状态。同时，你可以使用`v-model`绑定数据属性，让输入的文字描述与复选框的选中状态同步。

下面是一个简单的例子：

<template>
  <div>
    <label>
      <input type="checkbox" id="myCheckbox" v-model="checkedValue">
      我同意《用户协议》
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedValue: false
    };
  }
};
</script>

在这个例子中，`v-model="checkedValue"`使得复选框的选中状态和`checkedValue`数据属性保持一致。当你点击“我同意《用户协议》”文本时，复选框的状态会被更新。

如果你想关联多个复选框和相关的描述，可以考虑使用`v-for`循环遍历数组：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in agreements" :key="index">
        <input type="checkbox" :id="`check-${index}`" v-model="agreements[index].selected">
        <label :for="`check-${index}`">{{ item.description }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agreements: [
        { description: "协议1", selected: false },
        { description: "协议2", selected: false },
        // 更多协议项...
      ]
    };
  }
};
</script>

这里，`agreements`数组中的每个对象代表一条协议，它的`selected`属性对应复选框的状态。

<!-- 结算模块 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="d" class="checkall">全选 </div> <div class="operation"> <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> <a href="javascript:;" class="clear-all">清理购物车</a> </div> <div class="toolbar-right"> <div class="amount-sum">已经选<em>1</em>件商品</div> <div class="price-sum">总价： <em> </em></div> <div class="btn-area">去结算</div> </div> </div>改成组件，把父组件shop-cart

可以将上述代码封装成一个名为 "CartFloatBar" 的子组件，然后在父组件 "ShopCart" 中引用该组件，代码如下所示：

CartFloatBar.vue：

<template>
  <div class="cart-floatbar">
    <div class="select-all">
      <input type="checkbox" name="" id="d" class="checkall">全选
    </div>
    <div class="operation">
      <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
      <a href="javascript:;" class="clear-all">清理购物车</a>
    </div>
    <div class="toolbar-right">
      <div class="amount-sum">已经选<em>{{ selectedCount }}</em>件商品</div>
      <div class="price-sum">总价： <em>{{ totalPrice }}</em></div>
      <div class="btn-area">去结算</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartFloatBar',
  props: {
    selectedCount: {
      type: Number,
      default: 0
    },
    totalPrice: {
      type: Number,
      default: 0
    }
  }
}
</script>

ShopCart.vue：

<template>
  <div class="shop-cart">
    <!-- 购物车列表 -->
    <!-- ... -->
    <!-- 结算模块 -->
    <cart-float-bar :selectedCount="1" :totalPrice="99"></cart-float-bar>
  </div>
</template>

<script>
import CartFloatBar from './CartFloatBar.vue'

export default {
  name: 'ShopCart',
  components: {
    'cart-float-bar': CartFloatBar
  }
}
</script>

在 "ShopCart" 中引用 "CartFloatBar" 组件时，使用 kebab-case 的组件名称 "cart-float-bar"，因为在 HTML 中，只能使用 kebab-case 的组件名称。同时，在引用组件时，需要将组件文件引入，并在 components 中注册组件。