发布规定限制100字练习 · vue

``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style type="text/css"> .pcolor{ color: #FF0000; } </style> </head> <body> <div id="app"> <textarea v-model="context" rows="10" cols="30" placeholder="今天想说写什么呢......."></textarea> <p :class="{pcolor:context.length>100}">{{context.length}}/100</p> <button :disabled="context.length>100">提交</button> <button @click="add">清空</button> </div> </body> <script src="vue/vue.js"></script> <script> var vue=new Vue({ el:'#app', data:{ context:'' //字符串默认为空 }, methods:{ add(){ this.context='' //执行字符串等于空的操作 } } }) </script> </html> ``` ![](https://img.kancloud.cn/24/aa/24aa5ce9ef1411aaebbc55db0a1863dc_2436x739.png) ![](https://img.kancloud.cn/82/59/825907b99058597c276a4ba216b79b1b_2096x1358.png) ## 效果： ![](https://img.kancloud.cn/e4/ca/e4ca4cdc68c11022e940d5d5cb4e610e_3351x1174.png)