用watch方法,来限制字数

  1. <template>
  2. <div class="box">
  3. <textarea v-model="title" width="100%" ></textarea>
  4. <span>还可以输入{{this.titleMaxLength - this.title.length}}</span>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'Box',
  10. data() {
  11. return {
  12. title: '',
  13. titleMaxLength: 60
  14. };
  15. },
  16. methods:{
  17. },
  18. watch: {
  19. title() {
  20. if (this.title.length > this.titleMaxLength) {
  21. this.title = String(this.title).slice(0, this.titleMaxLength);
  22. }
  23. }
  24. }
  25. }
  26. </script>
  27. <style lang="less">
  28. .box{
  29. width: 100%;
  30. textarea{
  31. width: 100%;
  32. height: 60px;
  33. border: none;
  34. outline: none;
  35. box-sizing: border-box;
  36. }
  37. }
  38. </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. Google Analytics & Webtrend 使用笔记

    GA和webtrend中的参数,每每遇到了都记不住.遇到一点记一点好了... Page Views(PV): 浏览次数.用户每打开一个页面,记录为1个PV:用户多次打开同一个页面,PV累计多次. Da ...

  2. Request a certificate from a certificate vendor

    Request a certificate from a certificate vendor Now, with your CSR in hand, visit the Web site of yo ...

  3. 利用sizeof,得到二维数组的维度

    #include <iostream> #include <stdlib.h> using namespace std; int main() { ][]; cout < ...

  4. JavaScript进阶 - 第8章 浏览器对象

    第8章 浏览器对象 8-1 window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:

  5. RabbitMQ下载安装教程 Windows10

    https://blog.csdn.net/weixin_39735923/article/details/79288578

  6. The new week-学习Python-数据类型

    记录自学Python心得 之前有一段时间的JAVA自学,但最终以“无目标”的状态下被懒散驱散了动力,此为前提 Python的历程就不细细说道了,蛮有趣的 一般大家都是学习的CPython,速度较快(这 ...

  7. 前端CSS(2)

    前段基础css(2)   一.标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web网页的制作,是个“流”,从上而下,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画. 标 ...

  8. 使用CSS3的translate和transition功能,控制一个两个div块的联动

    之前的工作有接触到一些css3的新特性.div块的移动和回到初始位置,可以利用在开发中的很多地方.这里记录下来,下次就不用辛苦的灾区百度了. <html> <head> < ...

  9. .NET Core模块化

    .NET Core模块化 源码地址 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com账户:ad ...

  10. 1137 - Sin your life sin公式 + 枚举

    http://www.ifrog.cc/acm/problem/1137 和差化积公式, 变成2 * sin((x + y) / 2) * cos((x - y) / 2) + sin(n - (x ...