欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論