<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>
