快捷導(dǎo)航

Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例

更新時(shí)間：2023年01月11日 11:02:37 作者：xiaoxiaok

這篇文章主要為大家介紹了Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

自定義指令參考官方文檔：vuejs.bootcss.com/guide/custo…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定義指令帶參數(shù)</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-color="msg" />
    </div>
    <script src="vue.js"></script>
    <script>
      //自定義指令-帶參數(shù)
      Vue.directive("color", {
        bind: function (el, binding) {
          el.style.backgroundColor = binding.value.color;
        },
      });
      const vm = new Vue({
        el: "#app",
        data: {
          msg: {
            color: "blue",
          },
        },
      });
    </script>
  </body>
</html>

通過(guò)上面的代碼，可以看到定義了一個(gè)color的指令，在使用的時(shí)候傳遞了msg對(duì)象。

所以這個(gè)對(duì)象會(huì)給binding這個(gè)參數(shù)，我們通過(guò)這個(gè)參數(shù)的value 屬性獲取msg對(duì)象中的color屬性的值，然后用來(lái)設(shè)置文本框的背景色。

這里使用了bind這個(gè)鉤子函數(shù)：只調(diào)用一次，第一次綁定指令到元素時(shí)調(diào)用，我們可以在此綁定只執(zhí)行一次的初始化動(dòng)作。

以上就是Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue 帶參數(shù)自定義指令的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue中各種deep的區(qū)別解析
在Vue3中,推薦使用::deep作為深度選擇器,它比Vue2中的::v-deep語(yǔ)法更簡(jiǎn)潔,::v-deep、::deep、:deep()、>>>和/deep/都是用于穿透組件作用域的選擇器,但Vue3更傾向于使用::deep或:deep(),感興趣的朋友跟隨小編一起看看吧
2024-10-10
vue如何使用文件流進(jìn)行下載(new Blob)
這篇文章主要介紹了vue如何使用文件流進(jìn)行下載(new Blob)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例
這篇文章主要為大家介紹了vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
Vue實(shí)現(xiàn)英文字母大小寫在線轉(zhuǎn)換功能
在Web開發(fā)中,字符串處理是常見的需求之一,特別是在國(guó)際化應(yīng)用中,對(duì)于文本的格式化處理尤為重要,本文將介紹如何使用Vue.js來(lái)構(gòu)建一個(gè)簡(jiǎn)單的在線英文字母大小寫轉(zhuǎn)換工具,需要的朋友可以參考下
2024-09-09
解決vue axios的封裝請(qǐng)求狀態(tài)的錯(cuò)誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝請(qǐng)求狀態(tài)的錯(cuò)誤提示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue使用el-table 添加行手動(dòng)填寫數(shù)據(jù)和刪除行及提交保存功能
遇到這樣的需求點(diǎn)擊新增按鈕實(shí)現(xiàn)下列彈窗的效果,點(diǎn)擊添加行新增一行,點(diǎn)擊刪除進(jìn)行刪除行,點(diǎn)擊提交將數(shù)據(jù)傳遞到后端進(jìn)行保存,怎么實(shí)現(xiàn)的呢,下面通過(guò)實(shí)例代碼給大家詳細(xì)講解,感興趣的朋友一起看看吧
2023-12-12
Vue keepAlive頁(yè)面強(qiáng)制刷新方式
這篇文章主要介紹了Vue keepAlive頁(yè)面強(qiáng)制刷新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
手寫vite插件教程示例
這篇文章主要為大家介紹了手寫一個(gè)vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
vue輪播組件實(shí)現(xiàn)$children和$parent 附帶好用的gif錄制工具
這篇文章主要介紹了vue輪播組件實(shí)現(xiàn)，$children和$parent，附帶好用的gif錄制工具,需要的朋友可以參考下
2019-09-09