| 用户名： |
{{message}}
|
| 密码： |
我的数据类型是：{{ typeof(password) }}
|
| 个人简介： |
{{info}}
|
| 性别： |
男
女{{sex}}
|
| 爱好： |
{{hobby[0]}}
{{hobby[1]}}
{{hobby[2]}}{{checkHobby}}
|
| 对爱好进行快捷操作 |
|
| 所在地： |
{{loc}}
|
| 选择你擅长的技术： |
{{movie}}
|
| 可选职位
|
|
<tr>
<td><input type='submit' value='提交'></td>
<td><input type='reset' value='取消'></td>
</tr>
</table>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
message: '',
password: '',
info: '',
sex: '',
tempHobby: [],
checkHobby: [],
hobby: ['HTML', 'CSS', 'Vue'],
loc: '',
loclist: ['山西', '北京', '上海'],
movie: [],
movielist: ['java', 'c', 'go'],
joblist: ['前端工程师', 'Java程序员', '软件测试师'], // 可选职位列表
job: [], // 可选职位选中的项
myjob: [], // 已选职位列表
selectjob: [], // 已选职位选中的项
},
methods: {
// 全选
selectAll() {
this.checkHobby = this.hobby
},
// 全不选
noselectAll() {
this.checkHobby = []
},
// 反选
reverseSelect() {
this.tempHobby = []
for (var i = 0; i < this.hobby.length; i++) {
if (!this.checkHobby.includes(this.hobby[i])) {
this.tempHobby.push(this.hobby[i])
}
}
this.checkHobby = this.tempHobby
},
// 右移
right() {
for (var i = 0; i < this.job.length; i++) {
this.myjob.push(this.job[i])
var index = this.joblist.indexOf(this.job[i])
this.joblist.splice(index, 1)
}
this.job = []
},
// 左移
left() {
for (var i = 0; i < this.selectjob.length; i++) {
this.joblist.push(this.selectjob[i])
var index = this.myjob.indexOf(this.selectjob[i])
this.myjob.splice(index, 1)
}
this.selectjob = []
},
}
})
</script>
原文地址: https://www.cveoy.top/t/topic/lUvh 著作权归作者所有。请勿转载和采集!
免费AI点我,无需注册和登录