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. Window10上安装Redis及其客户端

    资源下载地址 Redis安装包:https://github.com/MicrosoftArchive/redis/releases Redis客户端: 链接:https://pan.baidu.co ...

  2. c/c++ 网络编程 read，write函数深入理解

    read,write函数深入理解 1,服务端的write函数,可以指定发送数据的长度(第三个参数length) write(connfd, &buff[i], length); 2,客户端的r ...

  3. RHEL7/CentOS7 安装Zabbix

    1.添加 Zabbix 软件仓库 rpm -ivh http://repo.zabbix.com/zabbix/4.0/rhel/7/x86_64/zabbix-release-4.0-1.el7.n ...

  4. 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

    在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...

  5. 浅析CompareAndSet(CAS)

    最近无意接触了AtomicInteger类compareAndSet(从JDK5开始),搜了搜相关资料,整理了一下 首先要说一下,AtomicInteger类compareAndSet通过原子操作实现 ...

  6. 用golang写了个统计各单位报送的信息数量的微服务

    代码很乱,bug很多,将就着看吧.参考了很多网上代码,只能说声感谢了. //cjl.ZongHeInfo.1.0 //目的:对各部门报上来的信息数量进行排名 //思路:预计一年信息量不超过100M,全 ...

  7. 015_python原生在线调试工具

    一.pdb https://docs.python.org/3/library/pdb.html

  8. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  9. [认证授权] 1.OAuth2授权

    1 OAuth2解决什么问题的? 举个栗子先.小明在QQ空间积攒了多年的照片,想挑选一些照片来打印出来.然后小明在找到一家提供在线打印并且包邮的网站(我们叫它PP吧(Print Photo缩写

  10. Neutron Vlan Network 学习

    vlan network 是带 tag 的网络,是实际应用最广泛的网络类型.    下图是 vlan100 网络的示例.   1. 三个 instance 通过 TAP 设备连接到名为 brqXXXX ...