<el-select v-model="emp.esex" placeholder="性别"> <el-option label="男" value="0"></el-option> <el-option label="女" value="1"></el-option> </el-select>为什么v-model=0,他不会选中男
时间: 2023-04-03 20:05:19 浏览: 71
这是因为在 Vue 中,v-model 绑定的值是一个变量,而不是一个固定的字符串。在这个例子中,v-model 绑定的是 emp.esex 这个变量,当选中男时,这个变量的值会被设置为 0,所以男会被选中。如果想让女被选中,需要将 v-model 的值设置为 1。
相关问题
这段代码的错误 <template> <!-- 输入框--> <!-- <div style="margin: 10px 0"> <el-input type="text" placeholder="请输入名称" style="width: 200px" suffix-icon="el-icon-search" class="ml-5" v-model="username"></el-input> <el-input type="text" placeholder="请输入邮箱" style="width: 200px" suffix-icon="el-icon-message" class="ml-5" v-model="email"></el-input> <el-input type="text" placeholder="请输入地址" style="width: 200px" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input> <el-button class="ml-5" type="primary">搜索</el-button> <el-button type="warning">重置</el-button> </div> --> <div class="manage"> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> <div class="manage-header"> <el-button type="primary" @click="dialogVisible = true">+ 新增</el-button> </div> </template> <script> export default { // name: "Emp", data() { return { dialogVisible: false, primary:"", }; } } </script> <style scoped></style>
这段代码的错误在于没有定义 `username`,`email`,和 `address` 变量,但是在模板中却使用了它们。你需要在 `data()` 函数中定义这些变量,例如:
```
data() {
return {
dialogVisible: false,
username: '',
email: '',
address: ''
};
}
```
另外,你定义了一个 `primary` 变量,但是没有在模板或脚本中使用它,因此可以删除它。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="text" placeholder="员工姓名" v-model="emp.name"> <input type="text" placeholder="员工工资" v-model="emp.salary"> <input type="text" placeholder="员工工作" v-model="emp.job"> <input type="button" value="添加" @click="f()"> <table border="1"> <caption>员工列表</caption> <tr> <th>编号</th> <th>姓名</th> <th>工资</th> <th>工作</th> <th>操作</th> </tr> <tr v-for="(emp,i) in arr"> <td>{{i + 1}}</td> <td>{{emp.name}}</td> <td>{{emp.salary}}</td> <td>{{emp.job}}</td> <td><input type="button" value="删除" @click="del(i)" )></td> </tr> </table> </div> <script src="js/vue.min.js"></script> <script> let v = new Vue({ el: "body>div", data: { arr: [{name: "张三", salary: 3000, job: "销售"}, {name: "张三", salary: 3000, job: "销售"}, {name: "张三", salary: 3000, job: "销售"}], emp: [{name: "", salary: "", job: ""}] }, methods: { f() { v.arr.push({name: v.emp.name, salary: v.emp.salary, job: v.emp.job}) }, del(i) { v.arr.splice(i, 1) } } }) </script> </body> </html>帮我改错
首先,你将Vue实例挂载的元素选择器写错了,应该是`el: "body>div"`而不是`el: "div"`;
其次,你定义的emp应该是一个对象而不是一个数组,所以应该改为`emp: {name: "", salary: "", job: ""}`。
最后,在删除员工信息时,你的模板中的删除按钮有一个多余的`)`,应该删除。
修改后的代码如下:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" placeholder="员工姓名" v-model="emp.name">
<input type="text" placeholder="员工工资" v-model="emp.salary">
<input type="text" placeholder="员工工作" v-model="emp.job">
<input type="button" value="添加" @click="f()">
<table border="1">
<caption>员工列表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>工资</th>
<th>工作</th>
<th>操作</th>
</tr>
<tr v-for="(emp,i) in arr">
<td>{{i + 1}}</td>
<td>{{emp.name}}</td>
<td>{{emp.salary}}</td>
<td>{{emp.job}}</td>
<td><input type="button" value="删除" @click="del(i)"></td>
</tr>
</table>
</div>
<script src="js/vue.min.js"></script>
<script>
let v = new Vue({
el: "body > div",
data: {
arr: [
{name: "张三", salary: 3000, job: "销售"},
{name: "李四", salary: 4000, job: "技术"},
{name: "王五", salary: 5000, job: "市场"}
],
emp: {name: "", salary: "", job: ""}
},
methods: {
f() {
v.arr.push({name: v.emp.name, salary: v.emp.salary, job: v.emp.job});
},
del(i) {
v.arr.splice(i, 1);
}
}
})
</script>
</body>
</html>
```
阅读全文