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 ...
随机推荐
- Google Analytics & Webtrend 使用笔记
GA和webtrend中的参数,每每遇到了都记不住.遇到一点记一点好了... Page Views(PV): 浏览次数.用户每打开一个页面,记录为1个PV:用户多次打开同一个页面,PV累计多次. Da ...
- 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 ...
- 利用sizeof,得到二维数组的维度
#include <iostream> #include <stdlib.h> using namespace std; int main() { ][]; cout < ...
- JavaScript进阶 - 第8章 浏览器对象
第8章 浏览器对象 8-1 window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:
- RabbitMQ下载安装教程 Windows10
https://blog.csdn.net/weixin_39735923/article/details/79288578
- The new week-学习Python-数据类型
记录自学Python心得 之前有一段时间的JAVA自学,但最终以“无目标”的状态下被懒散驱散了动力,此为前提 Python的历程就不细细说道了,蛮有趣的 一般大家都是学习的CPython,速度较快(这 ...
- 前端CSS(2)
前段基础css(2) 一.标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web网页的制作,是个“流”,从上而下,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画. 标 ...
- 使用CSS3的translate和transition功能,控制一个两个div块的联动
之前的工作有接触到一些css3的新特性.div块的移动和回到初始位置,可以利用在开发中的很多地方.这里记录下来,下次就不用辛苦的灾区百度了. <html> <head> < ...
- .NET Core模块化
.NET Core模块化 源码地址 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com账户:ad ...
- 1137 - Sin your life sin公式 + 枚举
http://www.ifrog.cc/acm/problem/1137 和差化积公式, 变成2 * sin((x + y) / 2) * cos((x - y) / 2) + sin(n - (x ...