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. matplotlib正弦和余弦图

    代码: # -*- coding: utf-8 -*- """ Created on Thu Jul 12 16:37:47 2018 @author: zhen &qu ...

  2. MySQL随笔(1)

    mysql是一种关系型数据库,和SQL ,oracle一样是较为常用的关系型数据库,属于oracle旗下的产品,在web应用方面,MySQL是最好的RDBMS(relational database ...

  3. Redis笔记-单机版安装

    1.几个相关概念 概念 现象描述 规避措施 穿透 通过访问一个缓存中不存在的key,导致程序一定要在数据库中执行查询 将访问结果进行处理,如果返回是null,也存储在缓存中,可以将过期时间设置较短 雪 ...

  4. Linux Mint chrome浏览器提示“需要安装adobe flash player”

    出现这种情况,是因为系统没有安装flash 插件造成的,用以下的命令安装: sudo apt-get install adobe-flashplugin 安装完成后,重启浏览器. 如果chrome浏览 ...

  5. RocketMQ4.3.x对顺序消息的理解

    1.RocketMQ消息队列简单介绍 这里简单介绍一下RocketMQ的消息队列的模型 一个topic对应多个队列如下图: 生产者和消费者分别向队列中发送和消费消息,生产者和消费者都可以是多个,通过组 ...

  6. 浅析C#中new、override、virtual关键字的区别

    Virtual : virtual 关键字用于修饰方法.属性.索引器或事件声明,并使它们可以在派生类中被重写. 默认情况下,方法是非虚拟的.不能重写非虚方法. virtual 修饰符不能与 stati ...

  7. nginx正向代理和反正代理区别

    1)正向代理:客户端 <一> 代理 一>服务端 客户端访问不到服务端,所以找了代理,由代理帮忙访问到了服务端 2)反向代理:客户端 一>代理 <一> 服务端 客户端 ...

  8. 小功能 HTML标签状态改变

    在编写程序得时候根据不同的业务需求会改变相应的标签的状态 今天介绍一下<a>标签状态的改变 当前业务场景为需要A标签的样式 即保留A标签的原有样式 在鼠标悬停得时候鼠标状态呈销售状 都知道 ...

  9. 我一个二本大学是如何拿到百度、网易大厂offer的！

    本文首发在我的微信公众号“程序员柯南”,底部附有二维码.原文阅读 01终于步入大学 我既没有跨过山和大海,也没有穿过人山人海,我就是我,一个2020届普通本科大学生.身为读者的你,关注了我,自然是想获 ...

  10. 解决 golang unrecognized import path "golang.org/x" 之类错误的一种尝试

    如果使用的开发IDE是goland,那么 打开 FILE -> setting -> Go Modules 选项 ,在proxy 选项上填写 "https://goproxy.i ...