vue属性方法、js属性方法整理

正在起飞得菜鸟

已于 2023-11-21 10:43:40 修改

阅读量2.1k

点赞数 1

分类专栏： javascript 前端文章标签：前端 javascript

于 2022-06-27 14:31:59 首次发布

本文链接：https://blog.csdn.net/HeXinT/article/details/125482823

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

1.startsWith() 方法

String类型,一般用于检测某请求字符串是否以指定的前缀开始的

let request = "http://www.baidu.com";
request.startsWith("http")   // 返回boolean值   true/false

2.endsWith() 方法

与startsWith 相对应的方法， 检测某请求字符串是否以指定的后缀结束的

let request = "http://www.baidu.com";
request.startsWith("com")   // 返回boolean值   true/false

3.Object.assign() 方法

Object.assign方法是ES6新增的一种对象方法，用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。第一个参数是目标对象，后面的参数都是源对象。

合并对象

4.trim()方法、replace(/(^\s)|(\s$)/g, '')正则替换、split(" ").join("")方法转化

这三种方法都可以用作判断用户输入是否为空或者空格的方式

！！注意split是以空格切割的，要在里面空格一下

//  可以去除字符串的头尾空格
var str = "       哈哈        ";
console.log(str.trim());   // 输出： "哈哈"


//  截头去尾 会去掉开始和结束的空格，类似于trim
 if (this.sourceName.replace(/(^\s*)|(\s*$)/g, '') == '') {
     this.$message.error('值不可以为空格和空')
 }


//   会去掉所有的空格，包括开始，结尾，中间
if(this.sourceName.split(" ").join("").length == 0){
	console.log("值为空或者为空格");
}

5.手机号、座机、传真、邮箱、身份证号、数字-小数正则

/^1[3|4|5|7|8][0-9]\d{8}$/       //11位手机号--  13、14、15、17、18开始


/^(\d{3,4}-)?\d{7,8}$/           //座机、传真格式是一样的----区号-号码


/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/    // 邮箱的


/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/   // 身份证号码18位----从1900到2099年中间的范围验证


 /^-?\d{1,4}(?:\.\d{1,2})?$/       //范围0~9999小数点后1~2位


element UI 正则校验使用示例


v-model绑定的变量名称: [
     { required: true, message: '请输入手机号码', trigger: 'blur' },
     { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
     {
       pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
       message: '请输入正确的手机号码'
      }
 ],

6、禁用浏览器右键菜单行为

// 禁用右键菜单的两种方式
    第一种
        document.oncontextmenu = function (e) {
      return false // 禁用右键
    }

    第二种
    document.addEventListener('contextmenu', function (e) {
      e.preventDefault()
    })




开启
        document.oncontextmenu = function (e) {
      return true // 开启右键
    }

7、身份证防敏显示

<el-table-column label="证件号码" >
      <template slot-scope="scope">
                {{ scope.row.certNo?scope.row.certNo.replace(/^(.{6})(?:\w+)(.{4})$/,"\$1******\$2"):'' }}
              </template>
</el-table-column>

8、修改使用iframe嵌套的页面的样式

    const iframe = document.getElementById('iframe') //  获取到iframe节点容器
    //  onload   在iframe加载完后执行的函数
    iframe.onload = () => {
      // contentWindow   获取到iframe的window
      // document  获取到iframe的window中的document
      //  获取修改节点 修改样式
      iframe.contentWindow.document.getElementsByClassName(
        'EmbedFrame-footer'
      )[0].style.display = 'none'
    }


简单一点就是使用JQ来实现

    $('#iframe').on('load', () => {
      $($(this)[0].contentWindow.document)
        .find('.EmbedFrame-footer')
        .css('display', 'none')
    })

9、 input输入框禁止输入中文

使用input事件监听用户输入的内容，使用正则的方校验是否存在中文，在通过replace方法将其替换成空字符，达到置空的效果

          <el-form-item label="密码">
            <el-input
              show-password
              v-model="password"
              placeholder="请输入密码"
              @input="password = password.replace(/[^\x00-\xff]/g,'')"
              size="mini"
            ></el-input>
          </el-form-item>

10、八位以上只能输入大写字母、小写字母、特殊字符的密码复杂度正则校验

 {
            pattern: /(?=.*[A-Z])(?=.*[a-z])(?=.*[\W_]).{8,}/,
            message: '格式为8位以上大写、小写、特殊字符组成'
          }

11、vue字符串实现换行

首先在字符串需要换行的地方添加上换行特殊字符    \n
比如：
let str = '你好呀;我想和你认识一下;这是我联系方式：xxxxxxxxxxx'
str = str.replce(/;/g,'\n')

按理说这样行了   但是这样不行

需要在展示的标签上添加上样式    style="white-space: pre-wrap;"
比如：
<div style="white-space: pre-wrap;">{{str}}</div>


这样输出来的就是换行的效果：

你好呀
我想和你认识一下
这是我联系方式：xxxxxxxxxxx

12.解决图片拉伸变形--object-fit

有几个属性  可以看一下

// 默认 fill     不保证保持原有的比例，内容全部显示铺满容器    /// 和不适用一样

//   contain     保持原有尺寸比例，使图片的宽度完整的显示，高度自动缩放

//   cover       保持原有尺寸比例。高度铺满容器，宽度等比缩放，超出部分被剪掉

//      none     图片原有宽高不变，超出部分被剪掉，保留下来的内容使图片的正中央

// scale-down    保持原有比例。当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致

//

13. css3去出移动端点击事件后的元素背景色高亮问题

     -webkit-tap-highlight-color: rgba(0,0,0,0);/*CSS3去除手机浏览器按钮点击出现的高亮框*/
     -webkit-tap-highlight-color: transparent;
     -moz-tap-highlight-color: transparent;

14.input输入框类型为number 去除尾部上下箭头

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
	input[type='number'] {
		-moz-appearance: textfield;
	}

	/deep/ input::-webkit-outer-spin-button,
	/deep/ input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
	/deep/ input[type='number'] {
		-moz-appearance: textfield;
	}

15、文本单词超出不自动换行的问题

使用css中的word-break: break-all属性

问题原因可能是：

        浏览器再解析div中的文本时，把里面的一串数字或者一串英文解析成了一个词，所以没有做换行处理

word-break    详细说明请查阅菜鸟教程

属性值
 
normal        使用浏览器默认的换行规则。

break-all     允许在单词内换行。。

keep-all      使用浏览器默认的换行规则。



因此我们可以尝试用word-break: break-all，设置允许在一个单词内换行

16.nuxt在async中获取cookies 数据

    async asyncData(ctx) {
        let cookieObj = {}
        // 接口需要用户认证，服务端无法获取请求拦截中的token
        if (process.server) {
            // 在服务端发起请求时获取headers整的cookie进行处理
            ctx.req.headers.cookie.split("; ").forEach(item => {
                cookieObj[item.split("=")[0]] = item.split("=")[1]
            })
            // // 接口携带access_token参数进行认证  不需要Bearer 
            if (cookieObj['token'] != undefined) cookieObj.token = cookieObj.token.split('%20')[1]
        }
    },

17.【JavaScript基础语法】正则表达式——限制input输入框只能输入字母、数字、字符等

1.限制input输入框只能输入大小写字母、数字、下划线的正则表达式：

<a-input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 

2.限制input输入框只能输入小写字母、数字、下划线的正则表达式：

<a-input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 

3.限制input输入框只能输入数字和点的正则表达式：

<a-input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">

4.限制input输入框只能输入中文的正则表达式：

<a-input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">  

5.限制input输入框只能输入数字的正则表达式：

<a-input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')"/>  

6.限制input输入框只能输入英文的正则表达式：

<a-input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')"/>

7.限制input输入框只能输入中文、数字、英文的正则表达式：

<a-input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"/>  

8.限制input输入框只能输入数字和字母的正则表达式：

<a-input onKeyUp="value=value.replace(/[\W]/g,'')"/>  

9.限制input输入框除了英文的标点符号以外，其他的都可以。中文，英文字母，数字，中文标点的正则表达式：

<a-input type="text" onkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')"/>

10.限制input输入框 只能输入数字代码(小数点也不能输入) 的正则表达式：

<a-input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>

11.限制input输入框只能输入数字，能输小数点的正则表达式：

<a-input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"/>

<a-input onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"/>

或者

<a-input type="text" 
         onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;ase this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" 
         onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;ase this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" 
         onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;ase{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"/>

12.限制input输入框只能输入字母和汉字的正则表达式：

<a-input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers"/>

13.限制input输入框只能输入英文字母和数字，不能输入中文的正则表达式：

<a-input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"/>

14.限制input输入框只能输入数字和英文的正则表达式：

<a-input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

15.限制input输入框小数点后只能有最多两位(数字、中文都可输入)，不能输入字母和运算符号的正则表达式：

<a-input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

16.限制input输入框小数点后只能有最多两位(数字、字母、中文都可输入)，==可以输入运算符号:==的正则表达式：

<a-input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

17.不可输入中文

<a-input  onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')">

18.不可输入空格

<a-input onkeyup="onkeyup="value = value.replace(/\s+/g, '')">

18.进入页面某个元素需要出现在可视区scrollIntoView

//多个元素动态循环创建 添加类名
// 获取当前点击对应 并执行
	let dom = document.querySelector(`.mock_${index}`);
	dom.scrollIntoView({
		behavior: "smooth",  // 平滑出现
		block: "center",  // 在可视区域居中展示
	});



// 单个元素
// 直接获取元素
				let dom = document.querySelector(".pay_main");
				dom.scrollIntoView({
					behavior: "smooth",
					block: "center",
				});

正在起飞得菜鸟

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue属性方法、js属性方法整理

Object.assign方法是ES6新增的一种对象方法，用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。第一个参数是目标对象，后面的参数都是源对象。这三种方法都可以用作判断用户输入是否为空或者空格的方式。注意split是以空格切割的，要在里面空格一下。与startsWith 相对应的方法，String类型,一般用于检测某请求。endsWith() 方法。是否以指定的前缀开始的。是否以指定的后缀结束的。
复制链接

扫一扫