这次给大家带来IView中on-change属性如何使用,IView中on-change属性使用的注意事项有哪些,下面就是实战案例,一起来看一下。
问题产生
之前跟同事刚研究了vue这个牛逼的框架,实现的是省市级三级联动的小功能,部分代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <Form-item label= "所在地区" >
<Row >
<Col span= "12" >
<select v-model= "f.p" @change= "selpro" placeholder= "sheng" >
<option :value= "i" v- for = "(v,i) in pro" >{{v.name}}</option>
</select>
</Col>
<Col span= "12" >
<select v-model= "f.c" @change= "selcity" placeholder= "shi" >
<option :value= "i" v- for = "(v,i) in city" >{{v.name}}</option>
</select>
</Col>
<Col span= "12" >
<select v-model= "f.cc" v-show= "county.length>0" @change= "result" placeholder= "xian" >
<option :value= "i" v- for = "(v,i) in county" >{{v.name}}</option>
</select>
</Col>
</Row>
</Form-item>
|
Salin selepas log masuk
前端界面用vue写完后,在前后端代码合并到同一个项目下时,因为js、html代码规范与vue的不一致,造成各种各样的问题,例如onchange=“”,@change=“”在iview中就不起作用,最终经过google这个强大的搜索引擎,把问题解决了,
解决问题
在iview中正确的写法应是:@on-change
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <Form-item label= "所在地区" >
<Row>
<i-col span= "12" >
<i-select v-model= "f.p" @on-change= "selpro" placeholder= "sheng" >
<i-option :value= "i" v- for = "(v,i) in pro" :key= "v.id" >{{v.name}}</i-option>
</i-select>
</i-col>
<i-col span= "12" >
<i-select v-model= "f.c" @on-change= "selcity" placeholder= "shi" >
<i-option :value= "i" v- for = "(v,i) in city" :key= "v.id" >{{v.name}}</i-option>
</i-select>
</i-col>
<i-col span= "12" >
<i-select v-model= "f.cc" v-show= "county.length>0" onchange= "result" placeholder= "xian" >
<i-option :value= "i" v- for = "(v,i) in county" :key= "v.id" >{{v.name}}</i-option>
</i-select>
</i-col>
</Row>
</Form-item>
|
Salin selepas log masuk
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
vue对storejs获取数据进行处理的步奏详解
不重启Vim但重新加载 .vimrc的方法有哪些
Atas ialah kandungan terperinci IView中on-change属性如何使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!