用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. C 语言实例 - 判断奇数/偶数

    C 语言实例 - 判断奇数/偶数 C 语言实例 C 语言实例 以下实例判断用户输入的整数是奇数还是偶数. 实例 #include <stdio.h> int main() { int nu ...

  2. WEB安全字体(Web Safe Fonts)-网页设计用什么字体兼容性好?

    效果:http://sandbox.runjs.cn/show/qgdljvh4 1 Arial微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读.但是,大写的“I” ...

  3. Web 加入favicon

    一.点击    制作自己的favicon图标; 二.在网页head中加入: <link rel="shortcut icon" href="favicon.ico& ...

  4. Cache中间件和缓存降级

    Cache中间件和缓存降级 1.前言 surging受到不少.net同学的青睐,也提了不少问题,提的最多的是什么时候集成API 网关,在这里回答大家最近已经开始着手研发,应该在1,2个月内会有个初版A ...

  5. net core 认证及简单集群

    net core 认证及简单集群 在Asp.net WebAPI中,认证是通过AuthenticationFilter过滤器实现的,我们通常的做法是自定义AuthenticationFilter,实现 ...

  6. Java VisualVM添加Visual GC插件

    1.访问地址:https://visualvm.github.io/pluginscenters.html,找到自己JDK版本对应的插件下载地址(我的JDK版本为1.7.0_67): 2.点击该链接进 ...

  7. Spark Mllib里的Mllib基本数据类型(图文详解)

    不多说,直接上干货! Spark Mllib基本数据类型,根据不同的作用和应用场景,分为四种不同的类型 1.Local  vector : 本地向量集,主要向spark提供一组可进行操作的数据集合 2 ...

  8. Could not load file or assembly 'Oracle.ManagedDataAccessDTC.DLL' or one of its dependencies.

    Could not load file or assembly 'Oracle.ManagedDataAccessDTC.DLL' or one of its dependencies.  不是有效的 ...

  9. HubbleDotNet 使用类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Hubble.S ...

  10. 利用wsdl.exe生成webservice代理类

    通常要手动生成WebService代理类需要把一句生成语句,如 wsdl.exe /l:cs /out:D:\Proxy_UpdateService.cs  http://localhost:1101 ...