用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中文本域限制字数的方法的更多相关文章

  1. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  2. vue中push()和splice()的使用方法

    vue中push()和splice()的使用方法 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.注意:1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度 ...

  3. vue中常见的问题以及解决方法

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...

  4. 用Vue中遇到的问题和处理方法(一)

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  5. 用Vue中遇到的问题和处理方法

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  6. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  7. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

  8. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  9. 在vue中使用sass的配置的方法

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev nod ...

随机推荐

  1. [Xcode 实际操作]六、媒体与动画-(12)检测UIView动画的结束事件:反转动画并缩小至不可见状态

    目录:[Swift]Xcode实际操作 本文将演示UIView视图反转动画的制作,并检测其动画结束事件. 即视图在进行反转动画的同时,将移动到目标位置,并缩小至不可见状态. 在项目导航区,打开视图控制 ...

  2. DOM事件-级别

    DOM事件0~3 不同级别的DOM事件因其实现方式不同,都有自己的特性. 0级:是在dom元素上提供相关事件类型属性,js程序可以通过这些特定类型的属性注册事件处理程序. 特性:一个元素同种类型的事件 ...

  3. Spring Cloud Hystrix理解与实践(一):搭建简单监控集群

    前言 在分布式架构中,所谓的断路器模式是指当某个服务发生故障之后,通过断路器的故障监控,向调用方返回一个错误响应,这样就不会使得线程因调用故障服务被长时间占用不释放,避免故障的继续蔓延.Spring ...

  4. java.lang.NoClassDefFoundError: com/sun/tools/javac/processing/JavacProcessingEnvironment

    最近项目用到了java程序动态编译java源文件,运行程序一直报错,提示错误如下: Can't initialize javac processor due to (most likely) a cl ...

  5. [Android基础]Android四大组件之BroadCast

    BroadCast的定义: 广播是一种订阅--通知 事件,广播接收者向Android系统 register (订阅广播),广播发送者向Adnroid系统 sendBroadCast(发送广播),然后A ...

  6. 2019湘潭校赛 E(答案区间维护)

    题目传送 思路是始终维护西瓜数量的区间,即L代表目前可以达到的最少的,R是最多的,然后判断一下. #include <bits/stdc++.h> using namespace std; ...

  7. 简易的开发框架(微服务) Asp.Net Core 2.0

      Asp.Net Core 2.0 + Mysql Orm + Ioc + Redis + AOP + RabbitMQ + Etcd + Autofac + Swagger 基础框架: https ...

  8. 我的grunt配置

    module.exports = function(grunt) { // 配置. grunt.initConfig({ pkg: grunt.file.readJSON('package.json' ...

  9. NgStyle和NgIf控制HTML标签显示的区别

    通常web开发者会选择将元素样式属性display设为none来隐藏目标元素.采用这种方式,这些元素虽然不可见却仍然保存在DOM中,这样带来的好处是,如果元素不久就需要再次显示,组件不需要重新被初始化 ...

  10. 无法启动 Diagnostic Policy Service(服务错误 1079)的解决方案

    问题 在services.msc中手动启动 Diagnostic Policy Service 时,弹出以下提示: ---------------------------服务------------- ...