Vueプロジェクトでv-distpickerプラグインを使用する
7893 ワード
/span>html>
lang="en">
charset="UTF-8">
</span>Title<span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"><div><span style="color:#bababa;">id=</span><span style="color:#a5c261;">"app"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;"> <v-distpicker><span style="color:#bababa;">:province=</span><span style="color:#a5c261;">"select.province" </span><span style="color:#bababa;">@province=</span><span style="color:#a5c261;">"changeProvince"
</span><span style="color:#a5c261;"> </span><span style="color:#bababa;">:city=</span><span style="color:#a5c261;">"select.city" </span><span style="color:#bababa;">@city=</span><span style="color:#a5c261;">"changeCity"
</span><span style="color:#a5c261;"> </span><span style="color:#bababa;">:area=</span><span style="color:#a5c261;">"select.area" </span><span style="color:#bababa;">@area=</span><span style="color:#a5c261;">"changeArea"
</span><span style="color:#a5c261;"> </span><span style="color:#bababa;">class=</span><span style="color:#a5c261;">"form-control"</span><span style="color:#e8bf6a;">></span></v-distpicker>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> </span>{{<span style="color:#ffc66d;">select</span>.<span style="color:#9876aa;">province</span>}}<span style="color:#e8bf6a;"><br/>
</span><span style="color:#e8bf6a;"> </span>{{<span style="color:#ffc66d;">select</span>.<span style="color:#9876aa;">city</span>}}<span style="color:#e8bf6a;"><br/>
</span><span style="color:#e8bf6a;"> </span>{{<span style="color:#ffc66d;">select</span>.<span style="color:#9876aa;">area</span>}}<span style="color:#e8bf6a;"><br/>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"/></div>
</span><span style="color:#e8bf6a;"><script><span style="color:#bababa;">src=</span><span style="color:#a5c261;">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span><span style="color:#e8bf6a;">></script>
</span><span style="color:#e8bf6a;"><script><span style="color:#bababa;">src=</span><span style="color:#a5c261;">"v-distpicker.js"</span><span style="color:#e8bf6a;">></script>
</span><span style="color:#e8bf6a;"><script>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"> </span>Vue.component(<span style="color:#6a8759;">'v-distpicker'</span><span style="color:#cc7832;">, </span>VDistpicker)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;"> </span><span style="color:#cc7832;"><strong>var </strong></span>vm = <span style="color:#cc7832;"><strong>new </strong></span>Vue({
<span style="color:#9876aa;">el</span>: <span style="color:#6a8759;">"#app"</span><span style="color:#cc7832;">,
</span><span style="color:#cc7832;"> </span><span style="color:#9876aa;">data</span>:{
<span style="color:#9876aa;">select</span>: { <span style="color:#9876aa;">province</span>: <span style="color:#6a8759;">' '</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">city</span>: <span style="color:#6a8759;">' '</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">area</span>: <span style="color:#6a8759;">' ' </span>}
}<span style="color:#cc7832;">,
</span><span style="color:#cc7832;"> </span><span style="color:#9876aa;">methods</span>:{
<span style="color:#ffc66d;">changeProvince</span>(data) {
<span style="color:#cc7832;"><strong>this</strong></span>.<span style="color:#ffc66d;">select</span>.<span style="color:#9876aa;">province </span>= data.<span style="color:#9876aa;">value</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>}<span style="color:#cc7832;">,
</span><span style="color:#cc7832;"> </span><span style="color:#ffc66d;">changeCity</span>(data) {
<span style="color:#cc7832;"><strong>this</strong></span>.<span style="color:#ffc66d;">select</span>.<span style="color:#9876aa;">city </span>= data.<span style="color:#9876aa;">value</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>}<span style="color:#cc7832;">,
</span><span style="color:#cc7832;"> </span><span style="color:#ffc66d;">changeArea</span>(data) {
<span style="color:#cc7832;"><strong>this</strong></span>.<span style="color:#ffc66d;">select</span>.<span style="color:#9876aa;">area </span>= data.<span style="color:#9876aa;">value</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;"> </span>}
}
})
<span style="color:#e8bf6a;"></script>
</span><span style="color:#e8bf6a;">
</span><span style="color:#e8bf6a;"/></span></span></span></code></pre>
</div>
</div>
</div>
</div>