vue通过watch对input做字数限定

1 <div id="app">
2     <input type="text" v-model="items.text" ref="count"/>
3     <div  v-html="number"></div>
4 </div>
new Vue({
    el: ‘#app‘,
    data: {
        number: ‘100‘,
        items: {
        text:‘‘,
    },
},
watch:{   //watch()监听某个值(双向绑定)的变化,从而达到change事件监听的效果
    items:{
        handler:function(){
            var _this = this;
            var _sum = 100; //字体限制为100个
            _this.$refs.count.setAttribute("maxlength",_sum);
            _this.number= _sum- _this.$refs.count.value.length;
        },
         deep:true
        }
    }
})
时间: 2024-10-11 19:51:25

vue通过watch对input做字数限定的相关文章

使用google API之前需要對input 做什麼 安全性的處理?

我正要使用node.js 和 google map api做一个小应用,Google MAP API的使用URL如下: https://maps.googleapis.com/maps/api/place/textsearch/json?query=KEY+WORDS&key=YOUR_API_KEY KEY WORDS的部分将是我在我的应用上id="keywords"这个input的value HTML CODE: <form action="/api/goo

html中如何修改选中 用input做的搜索框 的边框颜色

html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解决方法如下: 代码如下: input[type=text]:focus{ outline: none; // 如何把蓝色去掉? border: 1px solid #58b195; // 如何改成别的颜色?} 注意:input的type类型很多,type根据类型而定,也可以写成下面这种形式: inp

vue监听对input输入的字体字数限制

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" conte

vue动态(type可变)input绑定

遇到如下错误: v-model does not support dynamic input types 解决方法: vue 2.5.0以上,支持动态绑定 <input :type="type" :name="name" :id="name" v-model="inputVal"> vue 2.5.0以下,可以使用v-if来做 <input v-if="type == 'text'" ty

input上传限定文件类型

accept="image/*"   限定为只能上传图片 accept="audio/*   限定为只能上传音频 accept="video/*" 限定为只能上传视频 input[file]标签的accept属性可用于指定上传文件的 MIME类型 . 想要实现默认上传图片文件的代码,代码可如下 1 <input type="file" name="file" class="element"

oc65--协议应用1,接口.做数据类型限定

// WifeCondition.h #import <Foundation/Foundation.h> @protocol WifeCondition <NSObject> // 会做饭 - (void)cooking; // 会洗衣服 - (void)washing; // 有一份好工作 - (void)job; @end // Person.h #import <Foundation/Foundation.h> #import "Wife.h"

vue多个选择input v-model

多个input v-model要绑定在一个数组里, v-model = 'arr';  data:{   arr: '[]'  }, 而且 input标签要绑定id和value  如:<input id='jack' value='jack' />  如果input是请求后台的数据动态渲染的,要绑定id和value 如 <input :id = " item.id " :value =  " item.id " />

vue中ref在input中详解

当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model="inputval"> </template> export default { data(){ return { inputval:'', } }, watch:{ inputval(){ console.log(this.inputval) } } } 2.ref自定义一个方

团队协作统一vue代码风格,vscode做vue项目时的一些配置

1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有多余的空格,或者空行,会有红色波浪线提示. 但是光有提示还不够,还希望在ctrl + s保存的时候自动帮我们处理这些小问题.其实那些js规范,大部分人错得多的地方无非就是个空格与空行的问题 文件 -> 首选项 -> 设置 将以下配置填入 worksapce settings { "edi