vue2.x select2 指令封裝詳解
更新時(shí)間：2017年10月12日 16:47:49 作者：IT小君
本篇文章主要介紹了vue2.x select2 指令封裝詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了vue2.x select2 指令封裝，分享給大家，具體如下：
其他的就不說(shuō)了，說(shuō)說(shuō)封裝過(guò)程的問題吧
1、vue不同版本指令接受參數(shù)不一樣
2、醬油君對(duì)于vue2.x雙向綁定的機(jī)制不了解（有大神路過(guò)望在評(píng)論中不吝賜教）
上代碼：
<!DOCTYPE html>
<html>
<head>
<title>vue select2 封裝</title>
<link rel="external nofollow" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<style type="text/css">
.content{
text-align: center;
padding:50px;
}
.content *{
text-align: left;
}
.select{
width: 350px;
}
</style>
</head>
<body>
<div class="content" id="vue-example">
<select class="select" v-select2='options' v-model="selectValue"></select>
<br/>
<span>結(jié)果：{{ selectValue }}</span>
</div>
</body>
<script type="text/javascript">
Vue.directive('select2', {
inserted: function (el, binding, vnode) {
let options = binding.value || {};
$(el).select2(options).on("select2:select", (e) => {
// v-model looks for
// - an event named "change"
// - a value with property path "$event.target.value"
el.dispatchEvent(new Event('change', { target: e.target })); //說(shuō)好的雙向綁定，竟然不安套路
});
},
update: function(el, binding, vnode) {
$(el).trigger("change");
}
});
var vueApp = new Vue({
el: "#vue-example",
data: {
selectValue: '你還沒有選值',
options: {
data: [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
]
}
}
});
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了優(yōu)化Vue中date format的性能詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
本篇文章主要介紹了詳解vue組件通信的三種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Vue.js中使用components組件的實(shí)例講解
這篇文章主要介紹了Vue.js中使用components組件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue?3中引入了組合式函數(shù)編程方式，可以更好地實(shí)現(xiàn)代碼的復(fù)用和可維護(hù)性。通過(guò)定義可組合的函數(shù)，可以將組件的邏輯和狀態(tài)進(jìn)行拆分和組合，實(shí)現(xiàn)更靈活的代碼組織方式。同時(shí)，組合式函數(shù)也支持響應(yīng)式數(shù)據(jù)和生命周期鉤子函數(shù)，更加貼近Vue開發(fā)的實(shí)際場(chǎng)景2023-05-05
vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例
本篇文章主要介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
vue解決花括號(hào)數(shù)據(jù)綁定不成功的問題
今天小編就為大家分享一篇vue解決花括號(hào)數(shù)據(jù)綁定不成功的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue監(jiān)聽使用方法和過(guò)濾器實(shí)現(xiàn)
這篇文章主要介紹了Vue監(jiān)聽使用方法和過(guò)濾器實(shí)現(xiàn)，過(guò)濾器為頁(yè)面中數(shù)據(jù)進(jìn)行強(qiáng)化，具有局部過(guò)濾器和全局過(guò)濾器2022-06-06
vue中當(dāng)圖片地址無(wú)效的時(shí)候,顯示默認(rèn)圖片的方法
今天小編就為大家分享一篇vue中當(dāng)圖片地址無(wú)效的時(shí)候,顯示默認(rèn)圖片的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目在IE瀏覽器下運(yùn)行空白問題及解決
IE11瀏覽器無(wú)法解析ES6語(yǔ)法導(dǎo)致Vue項(xiàng)目在IE11下顯示空白,解決方法包括安裝babel-polyfill,并在項(xiàng)目的main.js文件中引入babel-polyfill,此外,js-base64版本3及以上不兼容IE11,解決辦法是使用版本3以下的js-base64,這些措施可以幫助兼容IE11,確保項(xiàng)目正常運(yùn)行2024-09-09
Vue 后臺(tái)管理類項(xiàng)目兼容IE9+的方法示例
這篇文章主要介紹了Vue 后臺(tái)管理類項(xiàng)目兼容IE9+的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02