在自定义指令的时候,和js行为有关的,最好就写在inserted中去,防止js代码不生效。
和样似有关的操作放在bind中去
Vue.direactive 【d儿 Rai K T V】 没有s哈

<body>
<div id="app">
<input type="text" value="" v-color="'red'">
//注意red有单引号和双引号,red变量要使用单引号扩起来哈

</div> <script>
Vue.directive("color", { //【d儿 Rai K T V】
bind: function (el, binging) {
el.style.color = binging.value; //接受颜色
console.log(binging) //Object {name: "color", rawName: "v-color", value: "red", expression: "'red'",
},
inserted: function (el) {
},
updated(el) {//[a p dei ti d]
//当v-model跟新的时候,就会执行这个函数 这个函数会执行多次
},
}) var vm = new Vue({
el: "#app",
data: { }
});
</script>
</body>

自定义v-color指令的更多相关文章

  1. angular8自定义管道、指令以及获取dom值

    版本: 1.自定义管道: example: 定义一个*ngFor 可以获取key值的管道 keyObject.pipe.ts // key value 管道 import { Pipe, PipeTr ...

  2. vue 自定义拖拽指令

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue自定义长按指令

    1.前言 在word中,当我们需要删除一大段文本的时候,我们按一下键盘上的退格键,就会删除一个字,当我们长按住退格键时,就会连续不停的删除,这就是键盘按键的长按功能.那么我们也想在网页中让一个按钮也具 ...

  4. Angular 自定义拖拽指令

    指令 组件是一种带模版的指令.指令是超级. 结构型指令(改变布局)和属性型指令(改变外观和行为). Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通 ...

  5. v:bind指令对于传boolean值的注意之处

    1,

  6. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  7. Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  8. Vue -自定义指令&钩子函数

    除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...

  9. 2.0 vue内置指令与自定义指令

    1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...

  10. Freemaker 自定义指令和函数

    自定义函数和指令都可以在前台或者后台进行指定. 个人理解:指令的作用,主要是进行页面调整之后进行输出:函数的作用,主要是为了进行运算,返回运算结果供前台展示. (一) 自定义指令 使用以下格式调用自定 ...

随机推荐

  1. 完全卸载Android Studio(卸载得干干净净)

    步骤其实很简单,一共三步,但是每一步都需要完成,步骤如下: 打开控制面板或腾讯软件管家等执行常规的卸载操作. 找到SDK的安装目录手动删除SDK. 进入“C:\Users\<你的用户名下> ...

  2. iOS----------jenkins

    错误日志: ERROR: Error fetching remote repo 'origin' Finished: FAILURE ERROR: Error cloning remote repo ...

  3. 使用Active Database Duplication创建跨平台Data Guard设置 (Windows/Linux) (Doc ID 881421.1)

    Using Active Database Duplication to Create Cross Platform Data Guard Setup (Windows/Linux) (Doc ID ...

  4. sql server数据库查询取出重复数据记录

    问题:博主在2011年6月,广东技术师范大学大四的时候,从学校计算机科学学院网站看到招聘信息并到广东中原地产IT部面试,很清楚记得当时的面试题目:怎么从数据库里面查询重复记录. 解决方案:在sql s ...

  5. Reinforcement Learning by Sutton 第三章习题答案

    好不容易写完了 想看全部的欢迎点击下面的github https://github.com/LyWangPX/Solutions-of-Reinforcement-Learning-An-Introd ...

  6. 基于django的个人博客网站建立(四)

    基于django的个人博客网站建立(四) 前言 网站效果可点击这里访问 今天主要添加了留言与评论在后台的管理和主页文章的分页显示,文章类别的具体展示以及之前预留链接的补充 主要内容 其实今天的内容和前 ...

  7. linux常用命令总结篇

    关于linux的一些基础命令,以前也学过,但是长时间不用还是感觉生疏了,所以记录下来以便后期温故知新. 1. cd:cd命令用来切换工作目录至dirname.cd ~ 进入用户主目录,cd - 进入之 ...

  8. ADB常用命令(一)

    转自:https://blog.csdn.net/qq_26552691/article/details/81348222 一.操作前请确认电脑上已配置好ADB环境.可在CMD命令行输入adb,如果出 ...

  9. Django回顾--配置文件

    """ Django settings for meiduo_mall project. Generated by 'django-admin startproject' ...

  10. tensorflow convert_variables_to_constants

    在使用tf.train.Saver函数保存模型文件的时候,是保存所有的参数信息,而有些时候我们并不需要所有的参数信息.我们只需要知道神经网络的输入层经过前向传播计算得到输出层即可,所以在保存的时候,我 ...