Vue3实现点击选中并双向绑定数据Demo(#仅供学习）

最新推荐文章于 2025-09-12 11:00:01 发布

原创最新推荐文章于 2025-09-12 11:00:01 发布 · 719 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #javascript #前端

本文介绍了如何在Vue3中使用组件实现点击选中功能，并通过v-model双向绑定数据。作者展示了如何在App.vue中集成CheckEditor组件，以及Vue3中setup()函数的使用和多处v-model的应用实例。

学习内容：Vue3实现点击选中并双向绑定数据
1、显示效果
在这里插入图片描述
点击单选框选中，“销售中”绑定所选中的数据

2、实现过程（使用组件）
在这里插入图片描述
一个单选框+一个input框作为一个组件

准备页面（App.vue + component/CheckEditor.vue）
在这里插入图片描述
CheckEditor.vue组件

代码

<template>
    <div class="check-editor">
        <div class="check-editor-inner">
            <div class="checkbox" :class="{ checked: modelValue }" @click="handleChecked"></div>
            <input type="text" class="editor" :value="title" @input="handleTextChange" />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        modelValue: Boolean,
        title: String,
        titleModifiers: {
            default: () => ({})
        }
    },
    setup(props, ctx) {
        console.log(props.titleModifiers)
        const handleChecked = () => {
            ctx.emit("update:modelValue", !props.modelValue)
        }
        const handleTextChange = (e) => {
            let value = e.target.value
            if (props.titleModifiers.trim) {
                value = value.trim()
            }
            console.log(value)
            ctx.emit("update:title", value)
        }
        return {
            handleChecked,
            handleTextChange
        }
    },
}
</script>

<style scoped>
.check-editor {
    cursor: pointer;
}

.check-editor-inner {
    display: flex;
    align-items: center;
}

.checkbox {
    width: 15px;
    height: 15px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    border-radius: 3px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox:hover,
.checkbox.checked {
    border-color: #409eff;
}

.checkbox.checked::after {
    content: "";
    border-radius: 2px;
    width: 9px;
    height: 9px;
    background: #409eff;
}

.editor {
    border: none;
    outline: none;
    margin-left: 5px;
    border-bottom: 1px solid #dcdfe6;
    font-size: inherit;
}
</style>

App.vue页面
在这里插入图片描述
products是存放的数据（假数据）

<template>
  <div class="container">
    <div>
      <strong>编辑</strong>
      <div class="list">
        <CheckEditor v-for="item in products" :key="item.id" v-model="item.sell" v-model:title="item.title">
        </CheckEditor>
      </div>
    </div>
    <div class="list">
      <strong>销售中:</strong>
      <div>
        <template v-for="(item, index) in sells" :key="item.id">
          <span>{{ index + 1 }}</span>
          <strong>{{ item.title }}</strong>
        </template>
      </div>
    </div>
  </div>
</template>


<script>
import CheckEditor from './components/CheckEditor.vue';
import { ref, computed } from "vue";

const defaultSells = [//假数据
  {
    id: 1, sell: true, title: "iphone1"
  },
  {
    id: 2, sell: false, title: "iphone2"
  },
  {
    id: 3, sell: true, title: "iphone3"
  },
  {
    id: 4, sell: true, title: "iphone4"
  }
]
export default {
  components: {
    CheckEditor,
  },
  setup() {
    const productsRef = ref(defaultSells);

    const sellsRef = computed(() => productsRef.value.filter((it) => it.sell))

    const isAccount = ref(false)
    return {
      products: productsRef,
      sells: sellsRef,
      isAccount: isAccount,
    }
  },
};
</script>
<style scoped>
.container {
  margin-top: 50px;
  width: 880px;
  margin: 50px auto;
}

.list {
  display: flex;
  margin: 1em 0;
  align-items: center;
}

strong {
  margin-right: 1em;
}
</style>

本次分享主要是学习Vue3的简单使用，同时观察vue2和vue3的不同
1、vue3的方法使用了setup(){}这个方法,不再是vue2的method(){},
2、vue3还可以多次使用v-model，如果是动态数据，v-model:绑定的数据名称 = “绑定的数据名称”，也可以进行数据绑定
3、可以使用computed进行对v-for、v-if的数据处理

仅做学习资料，还请大佬们指点1,2