vue3表单输入绑定方式

<!-- 将vue3定义的text绑定给inut元素, 当input元素发生input输入事件时, 将修改vue3定义的text -->
<input  :value="text" @input="event => text = event.target.value">

<input v-model="text">

<div class="main-box">
    <p>Message is: {{ msg }}</p>
    <input v-model="msg" placeholder="edit me" />
</div>
<script setup>
    import { ref,reactive } from 'vue'
    let msg = ref('a')
</script>

<div class="main-box">
    <p style="white-space: pre-line;">{{ msg }}</p>
    <textarea v-model="msg"></textarea>
</div>
<script setup>
    import { ref,reactive } from 'vue'
    let msg = ref('a')
</script>

<div class="main-box">
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
</div>
<script setup>
	import { ref,reactive } from 'vue'
	let checked = ref(true)
</script>

<div class="main-box">
    <div>Checked names: {{ checkedNames }}</div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
</div>
<script setup>
	import { ref,reactive } from 'vue'
	let checkedNames = ref(['Mike'])
</script>

<div class="main-box">
    <div>Picked: {{ picked }}</div>
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
</div>
<script setup>
	import { ref,reactive } from 'vue'
	let picked = ref('Two')
</script>

<div class="main-box">
    <div>Selected: {{ selected }}</div>
    <select v-model="selected">
	    <option disabled value="">Please select one</option>
	    <option>A</option>
	    <option>B</option>
	    <option>C</option>
    </select>
</div>
<script setup>
    import { ref,reactive } from 'vue'
    let selected = ref('B')
</script>

<div class="main-box">
    <div>Selected: {{ selected }}</div>
    <select v-model="selected" multiple>
        <option v-for="option in options" 
        	    :value="option.value" 
        	    :key="option.value">
            {{ option.text }}
        </option>
    </select>
</div>
<script setup>
	import { ref, reactive } from 'vue'
	let selected = ref('A')
	let options = ref([
	    { text: 'One', value: 'A' },
	    { text: 'Two', value: 'B' },
	    { text: 'Three', value: 'C' }
	])
</script>

<div class="main-box">
    <input 	type="checkbox" 
    		v-model="toggle" 
    		true-value="yes" 
    		:false-value="no" />
    {{toggle}}
</div>
<script setup>
	import { ref, reactive } from 'vue'
	let no = ref('nonono~')
</script>

<div class="main-box">
    <p>{{ pick }}</p>
    <input type="radio" v-model="pick" :value="first" />1
    <input type="radio" v-model="pick" :value="second" />2
</div>
<script setup>
	import { ref, reactive } from 'vue'
	let first = ref('第一')
	let second = ref('第二')
	let pick = ref('')
</script>

<div class="main-box">
    <p>{{ selected }}</p>
    <select v-model="selected">
        <!-- 绑定 内联对象字面量 -->
        <option :value="{ number: 123 }">123</option>
    </select>
</div>
<script setup>
    import { ref, reactive } from 'vue'
    let selected = ref()
</script>

<div class="main-box">
    <p>{{ msg }}</p>
    <!-- 在 "change" 事件后同步更新而不是 "input" -->
    <input v-model.lazy="msg" />
</div>
<script setup>
    import { ref, reactive } from 'vue'
    let msg = ref()
</script>

<div class="main-box">
	<input v-model.number="age" />
</div>
<script setup>
    import { ref, reactive } from 'vue'
    let age = ref()
</script>

<div class="main-box">
	<input v-model.trim="msg" />
</div>
<script setup>
    import { ref, reactive } from 'vue'
    let msg= ref()
</script>