快捷導(dǎo)航

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

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

這篇文章主要為大家介紹了Vue實現(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>

通過上面的代碼，可以看到定義了一個color的指令，在使用的時候傳遞了msg對象。

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

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

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

您可能感興趣的文章:

相關(guān)文章

vue項目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題
這篇文章主要介紹了vue項目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用，那就說明項目打包后，圖片和其他靜態(tài)資源文件相對路徑不對,本文給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧
2023-10-10
vue.js 1.x與2.0中js實時監(jiān)聽input值的變化
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實時監(jiān)聽input值的變化的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-03-03
詳解關(guān)于element el-button使用$attrs的一個注意要點
這篇文章主要介紹了詳解關(guān)于element el-button使用$attrs的一個注意要點,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
詳解vue組件通信的三種方式
本篇文章主要介紹了詳解vue組件通信的三種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
vuex與組件聯(lián)合使用的方法
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了vuex與組件聯(lián)合使用的方法,需要的朋友可以參考下
2018-05-05
VueJs打包之后遇到的坑及解決
這篇文章主要介紹了VueJs打包之后遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue過渡效果之CSS過渡詳解(結(jié)合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果。本文將從CSS過渡transition、CSS動畫animation及配合使用第三方CSS動畫庫(如animate.css)這三方面來詳細(xì)介紹Vue過渡效果之CSS過渡
2020-02-02
element-ui中el-cascader動態(tài)加載和默認(rèn)值詳解
vue+elementUI項目中el-cascader級聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動態(tài)加載和默認(rèn)值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
一篇文章帶你了解vue路由
這篇文章主要為大家詳細(xì)介紹了vue的路由，路由的本質(zhì)就是一種對應(yīng)關(guān)系，比如說我們在url地址中輸入我們要訪問的url地址之后，瀏覽器要去請求這個url地址對應(yīng)的資源，本文具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
vue中實現(xiàn)滾動加載更多的示例
下面小編就為大家?guī)硪黄獀ue中實現(xiàn)滾動加載更多的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11