简介
Vue vmodel
代码演示
<html>
<head>
<title>Vue v-model</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
}
div {
text-align: center;
}
</style>
</head>
<body>
<div id = "app">
<div class="flex-container">
<!-- v-model 将表单与Vue中的数据模型绑定 -->
<!-- 在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据 -->
<!-- 语法： v-model = "变量名" -->
<!-- 变量名必须在 data() 方法中定义 -->
<input type="text" v-model = "searchForm.name" placeholder = "请输入姓名">
<input type="password" v-model = "searchForm.password" placeholder = "请输入密码">
<select v-model = "searchForm.gender">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<br>
<br>
<span>{{searchForm}}</span>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
// 提前定义好的表单数据模型
// 使用 v-model 必须绑定一个数据模型
searchForm: {
name: '',
password: '',
gender: ''
}
}
}
}).mount('#app')
</script>
</body>
</html>效果
