vue中文本域限制字数的方法
用watch方法,来限制字数
<template>
<div class="box">
<textarea v-model="title" width="100%" ></textarea>
<span>还可以输入{{this.titleMaxLength - this.title.length}}</span>
</div>
</template>
<script>
export default {
name: 'Box',
data() {
return {
title: '',
titleMaxLength: 60
};
},
methods:{
},
watch: {
title() {
if (this.title.length > this.titleMaxLength) {
this.title = String(this.title).slice(0, this.titleMaxLength);
}
}
}
}
</script>
<style lang="less">
.box{
width: 100%;
textarea{
width: 100%;
height: 60px;
border: none;
outline: none;
box-sizing: border-box;
}
}
</style>
vue中文本域限制字数的方法的更多相关文章
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- vue中push()和splice()的使用方法
vue中push()和splice()的使用方法 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.注意:1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度 ...
- vue中常见的问题以及解决方法
有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...
- 用Vue中遇到的问题和处理方法(一)
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...
- 用Vue中遇到的问题和处理方法
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...
- vue中如何引入全局样式或方法
vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...
- 解决Vue中文本输入框v-model双向绑定后数据不显示的问题
前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- 在vue中使用sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev nod ...
随机推荐
- pytest框架(二)
一.示例代码一 D:YOYO\ __init__.py test_class.py # content of test_class.py class TestClass: def test_one(s ...
- 设置eclipse的Maven插件引入依赖jar包后自动下载并关联相应的源码(转)
好多用 Maven 的时候会遇到这样一个棘手的问题: 就是添加依赖后由于没有下载并关联源码,导致自动提示无法出现正确的方法名,而且不安装反编译器的情况下不能进入方法内部看具体实现 . 其实 eclip ...
- STP-9-处理RSTP中的拓扑变化
STP能识别四种不同的拓扑变化事件, 而RSTP只有当非边界端口从非转发状态变为转发状态才认为发生了拓扑变化事件 因为刚变为转发状态的端口可以为一些mac地址提供比之前更好的路径,CAM表需要更新.失 ...
- 037 Sudoku Solver 解数独
写一个程序通过填充空格来解决数独.空格用 '.' 表示. 详见:https://leetcode.com/problems/sudoku-solver/description/ class Solut ...
- android应用开发全程实录-你有多熟悉listview?
今天给大家带来<android应用开发全程实录>中关于listview和adatper中的部分.包括listview的基本使用,listview的优化等. 我们经常会在应用程序中使用列表的 ...
- 几种常用排序算法代码实现和基本优化(持续更新ing..)
插入排序(InsertSort): 插入排序的基本思想:元素逐个遍历,在每次遍历的循环中,都要跟之前的元素做比较并“交换”元素,直到放在“合适的位置上”. 插入排序的特点:时间复杂度是随着待排数组的有 ...
- 如何解决Eureka Server不踢出已关停的节点的问题?
如何解决Eureka Server不踢出已关停的节点的问题? eureka端: eureka.server.enable-self-preservation ...
- MySQL获取某个时间范围内的数据 TO_DAYS(date)函数
1.利用to_days函数查询今天的数据: select * from 表名 where to_days(时间字段名) = to_days(now()); to_days函数:返回从0000年(公元1 ...
- 只用jsp实现同样的Servlet功能
Jsp最终都会转化成java形式的Servlet执行,因此也可以说Jsp的本质就是Servlet,在jsp执行后,会在服务器上(例如tomcat中)生成.java以及.class文件.具体执行过程如下 ...
- 前端js优化方案(二)持续更新
由于上篇篇幅过长,导致编辑出了问题,另开一篇文章继续: (4)减少迭代次数,最广为人知的一种限制循环迭代次数的模式被称为“达夫设备(Duff`s Device)” Duff`s Device的理念是: ...