<template> <div> <div> <h2>INPUT 标签</h2> <div> <!--v-model 赋值会根据输入的内容变化--> <a-input placeholder="请输入内容" v-model="testData"/> </div> <div> {{ testData }} </div> <div> <!--defaultValue 不会根据输入的内容变化 --> <!--@change 实现的效果与 v-model 标签一致--> <a-input placeholder="请输入内容" defaultValue="testDate2" @change="testChange"/> </div> <div> {{testDate2}} </div> </div> <div>====================================================</div> <div> <h2>SELECT 选择器</h2> <div> <h3>固定写法</h3> <!--v-model="testData3" 不用写change事件 选中值会跟随着变化;disabled 禁用标签--> <a-select defaultValue="lucy" @change="optionChange"> <a-select-option value="jack">Jack</a-select-option> <a-select-option value="lucy">Lucy</a-select-option> <a-select-option value="disabled" disabled>Disabled</a-select-option> <a-select-option value="Yiminghe">yiminghe</a-select-option> </a-select> <h3>选中赋值</h3> <div>这是选中的中的值:{{ testData3 }}</div> </div> </div> <div> <h3>v-for遍历循环</h3> <a-select > <a-select-option v-for="(item,index) in options":key="index" :value="item.value">{{item.text}}</a-select-option> </a-select> </div> <div> <h3>多选标签mode="multiple"</h3> <div> <a-select mode="multiple" defaultValue="multipleData" @change="multipleChange"> <a-select-option value="jack">Jack</a-select-option> <a-select-option value="lucy">Lucy</a-select-option> <a-select-option value="disabled" disabled>Disabled</a-select-option> <a-select-option value="Yiminghe">yiminghe</a-select-option> </a-select> <div> <h3>多选赋值</h3> <!--多选赋值 赋的值是下拉选中的value值--> <div>这是多选赋值:{{multipleData}}</div> </div> </div> </div> </div> </template> <script> import {getAction} from '@api/manage' export default { name: 'HelloWord', data(){ return{ testData:"", testDate2:"this is test data", options:[], testData3:"Jack", multipleData:[], url:"/test/jeecgDemo/testDate" } }, methods:{ loadData(){ getAction(this.url).then((res)=>{ this.testData=res; }) }, testChange(e){ this.testDate2=e.target.value }, loadOptions(){ this.options=[{ text:"LiFan", valuel:"lifan" },{ text:"LiYun", valuel:"liyun" },{ text:"LiuYun", valuel:"liuyun" }] }, optionChange(value){ this.testData3=value; }, multipleChange(value){ this.multipleData=value; } }, created(){ this.loadData(); this.loadOptions(); } } </script> <style scoped> </style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。