common.js

var common =function() {

    return{

        f1:function(){

                    console.log("this is common f1().");

            },

        f2:function(){

                    console.log(" out vist f222222().");

            },

        // 小写转大写

        toUppercase:function(o,parName){

                        if(o && o[parName]){

                            o[parName] = o[parName].toUpperCase();

                        }

                    }

    }}();

if(typeof(Vue)=="function")Vue.prototype.common=common;

html页

<html>

<head>

<meta charset="UTF-8">

<script src="https://vuejs.org/js/vue.min.js"></script>

<script src="common.js"></script>

</head>

<body>

<div id="app">

<br>username:<input type="text" @keyup="common.toUppercase(v1,'username')" v-model="username" >

{{username}}

<br>userobj:<input type="text" @keyup="common.toUppercase(userobj,'usernameEN')" v-model="userobj.usernameEN" >

</div>

</body>

</html>

<script>

var v1=new Vue({

  el: '#app',

  data: {

    username:"",

    userobj:{usernameEN:""}

    },

  created:function(){

        this.common.f1();

  }

    ,methods:{

        testf2:function(){

        //this.common.f2();

        }

    }

})

//在vue外面也可以调用

common.f1();

common.f2();

</script>

为vue添加公用方法，vue添加通用方法的更多相关文章

  1. orm 通用方法——GetOneModel 条件查询一个对象

    数据连接层的方法封装成通用方法是很有必要,节省不必要的重复写代码. Golang的orm.xorm框架没有封装这些操作. 这里是一个查询单个对象的方法. 此处抛砖引玉,大家继续完善. 通用方法定义代码 ...

  2. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  4. js添加事件通用方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  6. vue 点击当前元素添加class 去掉兄弟的class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. vue不同序号的元素添加不同的样式

    vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...

  8. vue 实现todolist，包含添加，删除，统计，清空，隐藏功能

    vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...

  9. vue封装公用弹出框方法，实现点击出现操作弹出框

    vue封装公用弹出框方法,实现点击出现操作弹出框 如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽 ...

  10. vue + iview 怎样在vue项目下添加ESLint

    参考:https://segmentfault.com/a/1190000012019019?utm_source=tag-newest 使用iview框架的MenuGroup标签,vscode报红, ...

随机推荐

  1. FFmpeg部署及相关指令操作说明

    1.首先在http://ffmpeg.zeranoe.com/builds/上下载static版本, 下载好以后解压缩到 c:/ffmpeg/ 2.配置环境变量 path -> c:/ffmpe ...

  2. 安装composer时，提示 /usr/bin/env: php: 没有那个文件或目录

    今晚在Ubuntu环境上安装composer后,想查看下是否安装成功,使用composer -v,结果提示:/usr/bin/env: php: 没有那个文件或目录 现说说我的解决办法: 它提示的原因 ...

  3. AI-2048 注释

    针对2048游戏,有人实现了一个AI程序,可以以较大概率(高于90%)赢得游戏,并且作者在 stackoverflow上简要介绍了AI的算法框架和实现思路. 有博客介绍了其中涉及的算法,讲的很好 其中 ...

  4. sprintboot 中占位符及多环境配置

    (原) 关于springboot中多环境配置问题 1.在application.properties文件中通过 spring.profiles.active=... 选择系统所要加载的配置文件,这里的 ...

  5. [LeetCode] 19. 删除链表的倒数第N个节点

    题目链接:https://leetcode-cn.com/problems/remove-nth-node-from-end-of-list/ 题目描述: 给定一个链表,删除链表的倒数第 n 个节点, ...

  6. 弱网测试-Network Emulator 网络模拟工具使用

    参考链接 https://www.jianshu.com/p/6a3d38aafac1

  7. 企业推动移动化战略中为什么需要Moli？

    随着科技的进步,计算能力程指数上升,引爆人工智能的大发展,人类社会开始步进入智能时代.与此同时,端能力将演进到第三代,全面参与智能边缘计算,从PC互联到移动互联到万物互联,历史在快速演进:主流技术向物 ...

  8. 软工+C(5): 工具和结构化（重构中, part 1...)

    // 上一篇:Alpha/Beta换人 // 下一篇:最近发展区/脚手架 目录: ** 0x01 讨论:工具/轮子 ** 0x02 讨论:结构/演进 ** 0x03 讨论:行为/活动 ** 0x04 ...

  9. 基于 docker 的redis 主从+哨兵（快速部署）

    很简单(字多的步骤见:http://www.cnblogs.com/vipzhou/p/8580495.html) 1.直接启动3个容器 docker network create --subnet ...

  10. linux sed awk seq 正则使用 截取字符 之技巧

    [root@room9pc01 ~]# seq 5 1 2 3 4 5 [root@room9pc01 ~]# seq 2 5 2 3 4 5 seq 1 2 10 1 3 5 7 9 [root@d ...