本篇内容主要讲解“Vue组件上如何使用v-model单选框”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue组件上如何使用v-model单选框”吧!
先给大家介绍下Vue组件上使用v-model之单选框的实例代码。
子组件内容：
计算
安全
数据库
网络和加速
企业服务
<template>
<div>
<input
type="radio"
:id="valueName"
:value="valueName"
:checked="picked === valueName"
:picked="picked"
@click="$emit('change', $event.target.value)"
/>
<label :for="valueName">{{ valueName }}</label>
</div>
</template>
<script>
export default {
props: ["picked", "valueName"],
model: {
prop: "picked",
event: "change",
},
computed: {},
methods: {},
};
</script>
<style>
</style>父组件内容：
<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中数据流向是单向的，也就是说我们不能直接修改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单选框”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.zhuxianfei.com/jishu/js/59396.html
