vue实现单选题功能（Vue组件上使用v-model之单选框）
导读：先给大家介绍下Vue组件上使用v-model之单选框的实例代码。...
先给大家介绍下Vue组件上使用v-model之单选框的实例代码 。
子组件内容：
父组件内容：
<template>
<div>
<child-radio
v-for="valueName in valueNames"
:key="valueName"
v-model="picked"
:valueName="valueName"
></child-radio>
显示父组件单选的内容:{{ picked }} -->
</div>
</template>
<script>
import ChildRadio from "./ChildRadio.vue";
export default {
components: { ChildRadio },
data() {
return {
picked: "", //
valueNames: ["One", "Two", "Three"],
};
},
};
</script>
<style>
</style>
vue组件v-model
vue中数据数据流向
vue中数据流向是单向的 ，也就是说我们不能直接修改props中的值所以我们都会
<template>
<div>
<Renderer :data=data @updateValue=updateValue/>
</div>
</template>
<script setup>
我这里使用unplugin-auto-import所以不必导入ref
import Renderer from "./components/Render.vue"
let data = ref(0);
这样的方式修改父组件给我们传递的值
const updateValue = (value) =>{
data.value = value;
}
</script>
<template>
<div>
<input type="text" v-model="content" @input="loadValue ">
</div>
</template>
<script setup>
const emit = defineEmits();
let content = ref();
const loadValue = () => {
emit(updateValue, content.value);
}
</script>
因为这中操作太频繁了所以vue新增v-model:data=data‘这种方式修改父组件数据
<template>
<div>
第一个data是 ，如果需要修改 ，修改当前组件的那个值
<Renderer v-model:data="data"/>
</div>
</template>
<script setup>
import Renderer from "./components/Render.vue"
let data = ref(0);
</script>
<template>
<div>
<input type="text" v-model="content" @input="updateValue">
</div>
</template>
<script setup>
let content = ref();
const emit = defineEmits();
const updateValue = ()=>{
emit(update:data, content.value);
}
</script>
现在v-model可以自定义修饰符
//vue2提供的修饰符
v-model.trim(去掉两端空格)
v-model.number(只输入number)
v-model.lazy(change事件触发)
<template>
<div>
<Renderer v-model:data.capitalize="data"/>
{{data}}
</div>
</template>
<script setup>
import Renderer from "./components/Render.vue"
let data = ref(0);
</script>
<template>
<div>
<input type="text" v-model="content" @input="updateValue" />
</div>
</template>
<script setup>
const props = defineProps({
dataModifiers: Object
});
let content = ref();
const emit = defineEmits();
const updateValue = () => {
if (props.dataModifiers.capitalize) {
content.value = content.value.charAt(0).toUpperCase() + content.value.slice(1)
}
emit(update:data, content.value);
}
</script>
到此这篇关于Vue组件上使用v-model之单选框的文章就介绍到这了,更多相关Vue使用v-model单选框内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！