自学Ant Design Vue第一节Input标签与Select标签的常用方法

<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" style="width: 120px" @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 style="width: 120px">
 <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" style="width: 400px" 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>