当前位置：首页 > article >正文

VUE3的数据绑定，计算属性，监听

article 2025/3/13 11:51:49

使用v-model和计算属性、监听属性指令，完成以下内容，具体效果参考截图：

创建一个输入框，接受用户输入的内容。
编写合适的计算属性，实现用户输入内容的翻转。

创建一个按钮，点击按钮时处罚函数，提醒用户点击次数和翻转之后的用户输入内容。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"content="width=device-width,initial-scale=1.0">
        <title>Vue 示例</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
        </head>
        <body>
            <div id="app">
                    请输入一个字符串:<input type="text"v-model="chat">
                <div>
                    <button v-on:click="great">Add 1</button>
                    <p>按钮已经点击了{{counter}}次.</p>
                   
                </div>
            </div>
            </div>
            <script>
                const vm=Vue.createApp({
                    data(){
                        return{
                            counter:0,
                            name:'杜彤',
                            chat:''
                        };
                    },
                    methods:{
                        great:function(event){
                            this.counter++;
                            const reversedChat=this.chat.split('').reverse().join('');
                            alert('Hello'+this.name+'!'+reversedChat);
                        },
                    }
                }).mount('#app');
            </script>
        </body>
</html>