Vue组件上如何使用v-model单选框

本篇内容主要讲解“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组件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单选框”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！