vue题点击一个多选框，获取当前商品的价格，将价格显示在下方 比如 选中aaaaaa的多选框，在下方显示共2222元

你可以使用Vue的v-model指令来绑定多选框的选中状态，然后使用watch监听选中状态的变化，在选中状态改变时获取对应商品的价格并更新显示。以下是一个简单的示例：

HTML代码：

<div id="app">
  <div v-for="item in items" :key="item.id">
    <input type="checkbox" v-model="item.checked">
    {{ item.name }} - {{ item.price }}元
  </div>
  <div v-if="selectedItems.length > 0">
    共{{ total }}元
  </div>
</div>

Vue代码：

var app = new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'aaaaaa', price: 1000, checked: false },
      { id: 2, name: 'bbbbbb', price: 2000, checked: false },
      { id: 3, name: 'cccccc', price: 3000, checked: false }
    ]
  },
  computed: {
    selectedItems() {
      return this.items.filter(item => item.checked);
    },
    total() {
      return this.selectedItems.reduce((sum, item) => sum + item.price, 0);
    }
  },
  watch: {
    selectedItems() {
      this.$nextTick(() => {
        // 更新DOM后获取高度
        var el = this.$el.querySelector('.total');
        el.style.height = el.scrollHeight + 'px';
      });
    }
  }
});

在上面的代码中，我们使用v-model指令来绑定多选框的选中状态。然后使用computed属性来计算选中的商品列表和总价。最后使用watch监听选中商品列表的变化，在变化时更新显示并调整高度以适应内容。