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