摘要:直接上代码。<template> <p class="wrapper"> <p class="parents"> <textarea placeholder="请输入您要填写的个性签名" maxlength="30" autofocus="true" v-mo
直接上代码。
<template> <p class="wrapper"> <p class="parents"> <textarea placeholder="请输入您要填写的个性签名" maxlength="30" autofocus="true" v-model="val"></textarea> <span class="tips"> 可输入 <b :class="{'remnant':remnant.length!=0,'zero':remnant.length==0}">{{remnant}}</b>个字。 </span> </p> </p> </template> <script> export default { data() { return { val: "", maxLength: 30 }; }, computed: { remnant() { return this.maxLength - this.val.length; } } }; </script> <style scoped> .wrapper { border-top: 1px solid #999; padding: 30px; } .parents { width: 100%; height: 80px; position: relative; } textarea { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .tips { position: absolute; bottom: 0; right: 0; } .remnant { color: aqua; } .zero{ color: #e81844; } </style>
效果:
一个双向绑定和一个计算属性 轻松搞定。
相关文章推荐
网站谷歌评分90+意味着什么?2022-09-06
怎样将不安全网站变成安全网站访问?2022-09-26
网站排名下降,可能跟算法更新没关系2022-09-20
网站如何设置高质量的网页标题?2022-09-14
做外贸网站选哪些语言?法语、德语最吃香2022-09-13