Vue 双向数据绑定
2024年9月18日...大约 3 分钟
基本用法
使用 Vue 的 v-model 指令，可以在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
单文件组件
<template>
<h4>文本框：{{ data.text }}</h4>
<h4>单选框：{{ data.radio }}</h4>
<h4>复选框：{{ data.checkbox }}</h4>
<h4>记住密码：{{ data.remember }}</h4>
<h4>下拉框：{{ data.select }}</h4>
<!-- 单向数据绑定：当数据发生改变时，视图会自动更新。但用户手动更改 input 的值，数据不会自动更新 -->
单向数据绑定：<input type="text" :value="data.text">
<hr>
<!-- 双向数据绑定：当数据发生改变时，视图会自动更新。当用户手动更改 input 的值，数据也会自动更新 -->
<!-- 对于 <input type="text">，v-model 绑定的是 input 元素的 value 属性 -->
双向数据绑定：<input type="text" v-model="data.text">
<hr>
<!-- 对于 <input type="radio">，v-model 绑定的是 input 元素的选中状态 -->
<input type="radio" v-model="data.radio" value="1">写作
<input type="radio" v-model="data.radio" value="2">画画
<hr>
<!-- 对于 <input type="checkbox">，v-model 绑定的是 input 元素的选中状态 -->
<input type="checkbox" v-model="data.checkbox" value="a">写作
<input type="checkbox" v-model="data.checkbox" value="b">画画
<input type="checkbox" v-model="data.checkbox" value="c">运动
<hr>
<!-- 记住密码 -->
<input type="checkbox" v-model="data.remember">记住密码
<hr>
<!-- 对于 <select>，v-model 绑定的是 select 元素的选中状态 -->
<select v-model="data.select">
<option value="">请选择</option>
<option value="A">写作</option>
<option value="B">画画</option>
<option value="C">运动</option>
</select>
</template>
<script setup>
import { ref } from 'vue'
const data = ref({
text: "你好", //文本框
radio: "", //单选框
checkbox: [], //复选框
remember: false, //单个复选框-记住密码
select: "" //下拉框
})
</script>HTML
<body>
<div id="app">
<h4>文本框：{{ data.text }}</h4>
<h4>单选框：{{ data.radio }}</h4>
<h4>复选框：{{ data.checkbox }}</h4>
<h4>记住密码：{{ data.remember }}</h4>
<h4>下拉框：{{ data.select }}</h4>
<!-- 单向数据绑定：当数据发生改变时，视图会自动更新。但用户手动更改 input 的值，数据不会自动更新 -->
单向数据绑定：<input type="text" :value="data.text">
<hr>
<!-- 双向数据绑定：当数据发生改变时，视图会自动更新。当用户手动更改 input 的值，数据也会自动更新 -->
<!-- 对于 <input type="text">，v-model 绑定的是 input 元素的 value 属性 -->
双向数据绑定：<input type="text" v-model="data.text">
<hr>
<!-- 对于 <input type="radio">，v-model 绑定的是 input 元素的选中状态 -->
<input type="radio" v-model="data.radio" value="1">写作
<input type="radio" v-model="data.radio" value="2">画画
<hr>
<!-- 对于 <input type="checkbox">，v-model 绑定的是 input 元素的选中状态 -->
<input type="checkbox" v-model="data.checkbox" value="a">写作
<input type="checkbox" v-model="data.checkbox" value="b">画画
<input type="checkbox" v-model="data.checkbox" value="c">运动
<hr>
<!-- 记住密码 -->
<input type="checkbox" v-model="data.remember">记住密码
<hr>
<!-- 对于 <select>，v-model 绑定的是 select 元素的选中状态 -->
<select v-model="data.select">
<option value="">请选择</option>
<option value="A">写作</option>
<option value="B">画画</option>
<option value="C">运动</option>
</select>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const data = ref({
text: "你好", //文本框
radio: "", //单选框
checkbox: [], //复选框
remember: false, //单个复选框-记住密码
select: "" //下拉框
})
return {
data
}
}
}).mount('#app')
</script>
</body>修饰符
.lazy：在 “change” 时而非 “input” 时更新。即当失去焦点或按下回车时，才会更新数据.number：自动将用户的输入值转为数值类型.trim：自动过滤用户输入的首尾空白字符
Powered by Waline v3.3.2