Vue.js 模型数据绑定实战：用户表单示例
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Vue.js 模型数据绑定实战：用户表单示例</title>
</head>
<body>
<!--3 将模型数据和视图进行绑定-->
<div id='app'>
<!-- 展示模型数据 -->
<p>输入的姓 名是：{{user.name}}</p>
<p>输入的年 龄是：{{user.age}}</p>
<p>选择的性 别是：{{user.gender}}</p>
<p>选择的爱 好是：{{user.hobby}}</p>
<pre><code> <hr>
<form action=''>
姓名:<input type='text' v-model='user.name' ><br><br>
年龄:<input type='text' v-model='user.age'><br><br>
性别:<input type='radio' value='man' v-model='user.gender'>男
<input type='radio' value='woman' v-model='user.gender'>女<br><br>
爱好:<input type='checkbox' value='sing' v-model='user.hobby'>唱
<input type='checkbox' value='dance' v-model='user.hobby'>跳
<input type='checkbox' value='basketball' v-model='user.hobby'>篮球<br><br>
<input type='button' id='btn' value='保存' onclick='fn()'>
</form>
</div>
</code></pre>
<!--1 引入js文件-->
<script src='js/vue.js'></script>
<!--2 定义Vue对象，初始化模型数据-->
<script>
new Vue({
el:'#app', //定义Vue控制的区域
data:{
user:{
name: '', //姓名
age: '', //年龄
gender: '', //性别
hobby: [] //由于爱好可能存在多个,使用数组封装
}
}
});
function fn() {
var a = document.getElementById('btn');
for (let i = 0; i < a.length; i++) {
const element = a[i];
alert(a[i])
}
}
</script>
</body>
</html>
<p><strong>代码优化建议:</strong></p>
<ol>
<li><strong>按钮事件绑定:</strong> 将 <code>onclick='fn'</code> 改为 <code>onclick='fn()'</code> 以正确调用 <code>fn</code> 函数。</li>
<li><strong>获取按钮元素:</strong> <code>document.getElementById('btn')</code> 已经可以正确获取按钮元素，无需循环。</li>
<li><strong>函数功能:</strong> 当前 <code>fn</code> 函数只是获取了按钮元素并使用了 <code>alert</code> 展示，建议根据实际需求添加更具体的逻辑，例如将表单数据存储到数据库或进行其他操作。</li>
</ol>
<p><strong>改进后的示例代码:</strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Vue.js 模型数据绑定实战：用户表单示例</title>
</head>
<body>
<div id='app'>
<p>输入的姓名是：{{user.name}}</p>
<p>输入的年龄是：{{user.age}}</p>
<p>选择的性别是：{{user.gender}}</p>
<p>选择的爱 好是：{{user.hobby}}</p>
<hr>
<form action=''>
姓名:<input type='text' v-model='user.name' ><br><br>
年龄:<input type='text' v-model='user.age'><br><br>
性别:<input type='radio' value='man' v-model='user.gender'>男
<input type='radio' value='woman' v-model='user.gender'>女<br><br>
爱好:<input type='checkbox' value='sing' v-model='user.hobby'>唱
<input type='checkbox' value='dance' v-model='user.hobby'>跳
<input type='checkbox' value='basketball' v-model='user.hobby'>篮球<br><br>
<input type='button' id='btn' value='保存' onclick='fn()'>
</form>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
user: {
name: '',
age: '',
gender: '',
hobby: []
}
}
});
function fn() {
// 获取表单数据
let name = document.querySelector('input[type='text'][v-model='user.name']').value;
let age = document.querySelector('input[type='text'][v-model='user.age']').value;
let gender = document.querySelector('input[type='radio'][v-model='user.gender']:checked').value;
let hobbies = Array.from(document.querySelectorAll('input[type='checkbox'][v-model='user.hobby']:checked')).map(checkbox => checkbox.value);
// 打印或发送表单数据
console.log('姓名：', name);
console.log('年龄：', age);
console.log('性别：', gender);
console.log('爱好：', hobbies);
// 清空表单
// ...
}
</script>
</body>
</html>
</code></pre>
<p><strong>注意:</strong></p>
<ul>
<li>以上示例代码仅提供参考，请根据实际需求进行调整。</li>
<li>建议使用 Vue 的 <code>v-model</code> 指令来绑定表单数据，避免手动操作 DOM 节点，使代码更加简洁易懂。</li>
<li>在实际开发中，可能需要进行数据验证、错误处理等操作，以确保数据安全性和可靠性。</li>
</ul>
原文地址: https://www.cveoy.top/t/topic/qvld 著作权归作者所有。请勿转载和采集!