HBuilder X 中Vue.js基础使用4-＞表单输入绑定（三）

      表单绑定是实现动态数据双向绑定的重要部分，它让开发者可以轻松地管理和响应用户输入。本文将详细介绍如何在Vue 3中利用v-model指令以及一些特定修饰符来处理不同类型的表单输入。

v-model双向数据绑定

Vue的 v-model 指令提供了双向绑定的功能，key在表单和组件中使用。对于原生表单元素，v-model 绑定的是 value 属性和 input 事件。

当使用属性绑定:value='变量'时，当input框发生变化，页面不会改变，使用v-model双向数据绑定时，页面会及时更新渲染

（1）单项数据绑定 :value=‘变量’

input框内的内容变化，页面不会及时更新

（2）双向数据绑定 v-model

input框内的内容变化，页面会更新

响应式表单数据 

<script setup>
	import {ref,reactive,computed,nextTick} from 'vue'
	
	const uname=ref(" ")
	const gender=ref('a1')
	const selectSingle=ref('')
	const selectMore=ref([])
	const checkMore=ref(['手机'])
	const txt=ref(' ')
	//一个响应式对象form来存储表单的各种输入值：
	const hobbys = reactive([
	  {
		id: 1,
		value: '玩游戏'
	  },
	  {
		id: 2,
		value: '看小视频'
	  },
	  {
		id: 3,
		value: '唱歌'
	  }
	])
	
	const ins = reactive([
	  {
		id: 1,
		value: '电脑'
	  },
	  {
		id: 2,
		value: '手机'
	  },
	  {
		id: 3,
		value: '手表'
	  },
	  {
		id: 4,
		value: '电视'
	  }
	])
</script>

文本 (Text)

<span>用户名：{{uname}}<el-input v-model="uname"/></span><br/>

 

单选框 (Radio)

<span>性别： {{gender}}
            <el-radio type="radio" v-model="gender" label="a1"><label for="a1">男</label></el-radio>
            <el-radio type="radio" v-model="gender" label="a2"><label for="a2">女</label></el-radio>
        </span><br/>

 

选择框 (Select)

单选爱好： <el-select v-model="selectSingle" placeholder="请选择">
            <el-option v-for="item in hobbys" :label="item.value" :key="item.id" :value="item.id"></el-option>
        </el-select> {{selectSingle}} <br/><br/>
        
        多选爱好： <el-select v-model="selectMore" placeholder="请选择" multiple="multiple">
            <el-option v-for="item in hobbys" :label="item.value" :key="item.id" :value="item.id"></el-option>
        </el-select> {{selectMore}} <br/><br/>

 

   

复选框 (Checkbox)

    多选设备：<el-checkbox v-model="checkMore" v-for="item in ins" :label="item.value" :key="item.id" :value="item.id" >
         </el-checkbox>&nbsp;&nbsp;{{checkMore}}<br/><br/>

 

修饰符

lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<!-- 只有在失去焦点或按下回车键后才更新绑定的值。 -->
{{txt}}<el-input v-model.lazy="txt"></el-input><br/><br/>

 

number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<!--将用户的输入转换为数值类型。-->
 {{txt}}<el-input v-model.number ="txt"></el-input><br/><br/>

 

trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<!--自动过滤用户输入的首尾空白字符-->
{{txt}}<el-input v-model.trim="txt"></el-input><br/><br/>

 

 

总结：

     通过Vue 3中的v-model指令和响应式数据，我们能够简洁而高效地管理各种表单输入。利用修饰符，我们可以进一步控制输入的行为，使得表单的处理变得更加灵活和友好。希望本文能帮助您更好地理解和应用Vue 3中的表单输入绑定功能！