v-model双向绑定语法糖

67 阅读1分钟

是什么 在input框中使用v-model其实是个语法糖

他其实是两个东西的合写,

一个是由数据渲染到模板中使用v-bind绑定value属性。完成了数据到模板的渲染。

一个是由模板中页面输入到数据里面,使用的是一个@input事件这个事件绑定了一个方法,这个方法实现了把页面模板中输入的值赋值到数据里面

是他们两个的合写

<template>
	<view class="out">
		<input type="text" v-model="person" placeholder="请输入">
		<!-- <input type="text" :value="person" @input="handleInput" placeholder="请输入"/> -->
		<view>{{person}}</view>
	</view>
	
</template>

<script setup>
	import {ref} from 'vue'
	const person = ref("")
	const handleInput = function(value){
		console.log(value)
		person.value =  value.detail.value
	}
</script>

<style lang="scss" scoped>
	input{
		border:1px solid red;
		margin-top: 10px;
	}      
</style>