评论框架

评论框架

当文字超过100，发布无法使用

当0时则清空无法使用

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title></title>
            </head>
            <body>
                <div id="app">
                    <textarea v-model = "content" cols="50" rows="10" placeholder="说说平台"></textarea>
                    <br/>
                    <!-- {{content.length}}/100 只是单纯的显示格式-->
                    <p :class="{warn :content.length > 100}">{{content.length}}/100
                    </p>
                    <button :disabled="content.length>100">发布</button>
                    <button @click="clear" :disabled="content.length <= 0">清空</button>
                </div>
                <script src="js/vue.min.js"></script>
                <script>
                    new Vue({
                        el:'#app',
                        data:{
                            content:""
                        },
                        methods:{
                            clear(){
                                this.content=''
                            }
                        }
                    })
                </script>
            </body>
        </html>
posted @ 2022-05-19 17:53  爱豆技术部  阅读(42)  评论(0)    收藏  举报