文本输入框：
<template>
<div>
<input v-model="message" placeholder="Enter your message">
<p>Message: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
</script>
在上述示例中，使用 v-model 将输入框的值与 message 数据属性进行双向绑定。
多行文本输入框：
<template>
<div>
<textarea v-model="message" placeholder="Enter your message"></textarea>
<p>Message: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
</script>
同样地，v-model 也可以用于多行文本输入框。
单选框：
<template>
<div>
<input type="radio" id="option1" value="Option 1" v-model="selectedOption">
<label for="option1">Option 1</label>
<input type="radio" id="option2" value="Option 2" v-model="selectedOption">
<label for="option2">Option 2</label>
<p>Selected option: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
};
}
};
</script>
通过 v-model 实现单选框的双向绑定。
复选框：
<template>
<div>
<input type="checkbox" id="agree" v-model="isAgreed">
<label for="agree">I agree to the terms and conditions</label>
<p>Agreed: {{ isAgreed }}</p>
</div>
</template>
<script>
export default {
data() {
return {
isAgreed: false
};
}
};
</script>
同样地，v-model 也可以用于复选框。
下拉框：
<template>
<div>
<select v-model="selectedOption">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
<p>Selected option: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
};
}
};
</script>
通过 v-model 实现下拉框的双向绑定。
以上是 Vue 3.0 中表单输入绑定的基本用法。v-model 可以大大简化表单元素的状态管理，使得表单的使用更加方便和灵活。
转载请注明出处：http://www.zyzy.cn/article/detail/489/Vue 3.0