011_Vue自定义指令
生活随笔
收集整理的這篇文章主要介紹了
011_Vue自定义指令
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 自定義指令
1.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>自定義指令</title></head><body><div id="app"><div>用戶名: <input type="text" v-model="userName" /></div><div>密碼: <input type="password" v-focus v-model="password" /></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 自定義指令Vue.directive("focus", {// inserted被綁定元素插入父節點時調用inserted: function(el){// el表示指令所綁定的元素el.focus();} });var vm = new Vue({el: "#app",data: {userName: "張三",password: "123456"}});</script></body> </html>1.2. 效果圖
2. 自定義指令傳遞參數
2.1. 代碼?
?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>自定義指令傳遞參數</title></head><body><div id="app"><div>用戶名: <input type="text" v-model="userName" v-color="msg" /></div><div>密碼: <input type="password" v-model="password" /></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 自定義指令Vue.directive("color", {inserted: function(el, binding){// el表示指令所綁定的元素console.log(binding);el.style.backgroundColor = binding.value.color;} });var vm = new Vue({el: "#app",data: {userName: "張三",password: "123456",msg: {id: 1001, color: "green"}}});</script></body> </html>2.2. 效果圖
3. 局部自定義指令
3.1. 代碼?
?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>局部自定義指令</title></head><body><div id="app"><div>用戶名: <input type="text" v-model="userName" v-color="msg" /></div><div>密碼: <input type="password" v-model="password" v-focus /></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {userName: "張三",password: "123456",msg: {id: 1001, color: "green"}},methods: {},directives: {focus: {inserted: function(el){el.focus();}},color: {// bind只調用一次, 指令第一次綁定到元素的時候調用, 在這里可以進行一次性的初始化設置。bind: function(el, binding){el.style.backgroundColor = binding.value.color;}}}});</script></body> </html>3.2. 效果圖
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的011_Vue自定义指令的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 035_vue脚手架
- 下一篇： html5倒计时秒杀怎么做,vue 设