Vue实现动态显示textarea剩余字数

Vue实现动态显示textarea剩余文字数量，具体内容如下

这里我们假设允许用户输入的最多数量为200个

rush:xhtml;">

<span>{{remnant}}/200</span>
</pre>
</div>
<p>javascript<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>如下：</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
data(){
 return{
 remnant: 200
 }
}
<p>methods:{<br />
desc<a href="https://www.jb51.cc/tag/input/" target="_blank" class="keywords">input()</a>{<br />
var txtVal = this.desc.length;<br />
this.remnant = 200 - txtVal;<br />
}<br />
}</p>
</pre>
</div>
<p>css<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a><a href="https://www.jb51.cc/tag/zaizheli/" target="_blank" class="keywords">在这里</a>就不码出来了~</p>
<p>实现<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>如下： 
</p>
<p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201705/2017522152536397.jpg?2017422152552" /></p></p>
<p>以上就是本文的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/textarea/" class="tag_link" target="_blank">textarea</a><a href="https://m.jb51.cc/tag/textareap/" class="tag_link" target="_blank">textarea</a><a href="https://m.jb51.cc/tag/zishu/" class="tag_link" target="_blank">字数</a><a href="https://m.jb51.cc/tag/zishup/" class="tag_link" target="_blank">字数</a></div>
                </div>
              </div>
          </div>
            
            <div class="clearfix"></div>

            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738809.html" title="<el-table-column prop="item_no" label="料号"/>设置最小宽度"><el-table-column prop="item_no" label="料号"/>设置最小宽度</a>
              </div>
              <div class="summary">可以通过min-width属性来设置el-table-column的最小宽度。以...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/07-25/11/aa5cd839f2492870d49c14806d1b42d4.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738808.html" title="vue 理解yarn start 和yarn dev的区别">vue 理解yarn start 和yarn dev的区别</a>
              </div>
              <div class="summary">yarn dev，当文件变动后，会自动重启。 yanr start不会自动重...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738807.html" title="vue3 ref响应式引用">vue3 ref响应式引用</a>
              </div>
              <div class="summary">ref 用于创建一个对值的响应式引用。这个值可以是原始值（如...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738806.html" title="Vue查询传参">Vue查询传参</a>
              </div>
              <div class="summary">通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738805.html" title="suffix-icon属性隐藏el-select下拉框右边的下拉图标">suffix-icon属性隐藏el-select下拉框右边的下拉图标</a>
              </div>
              <div class="summary">&lt;el-form-item label=&quot;入库类型&quot; ...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/vue/4738804.html" title="API引用在Element UI (Vue 2)和Element Plus (Vue 3)中的不同">API引用在Element UI (Vue 2)和Element Plus (Vue 3)中的不同</a>
              </div>
              <div class="summary">API 变动 样式类名变化: 一些组件的样式类名有所变动，可能需...</div>
            </div></div>
            </div>
           
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 编程之家. 当前版本 V7.0.16<br>
            <span class="ml5">编程之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-8</a>
        </div>
    </div>
</footer>
<script>
(function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>