Vue3用户交互——事件

作者：我家自动化 | 2024-04-15 13:41:11

踩

Vue3用户交互——事件

1. 鼠标单击事件、输入框双向绑定和修饰符

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3用户交互——事件</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
        <h3>简易计算器</h3>
        <div id="app">
            <!-- 加上了.number和.lazy两个修饰符 -->
            <!-- v-model实现双向绑定，其后跟的参数（number/lazy/debounce)
            1.number 想将用户的输入自动转换为Number类型（如果原值的转换结果为NaN，
            则返回原值）
            2. lazy  在默认情况下， v-model在input事件中同步输入框的值和数据， 
            我们可以添加一个lazy特性，从而将数据改到change事件中发生
            3. debounce  设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据，
            如果每次更新都要进行高耗操作 -->
            <input type="text" v-model.number.lazy="num1" placeholder="请输入数字">
            <select name="s1" id="" v-model="type">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" v-model.number.lazy="num2" placeholder="请输入数字">
            <button @click="computed">=</button>
            <span>{{result}}</span>
        </div>

        <script>
            const x = {
                data() {
                    return {
                        num1: 0,
                        num2: 0,
                        result: 0,
                        type: '+',
                    }
                },
                methods: {
                    computed() {
                        switch(this.type){
                            case "+":
                                this.result = this.num1 + this.num2;
                                break;
                            case "-":
                                this.result = this.num1 - this.num2;
                                break;
                            case "*":
                                this.result = this.num1 * this.num2;
                                break;
                            case "/":
                                this.result = this.num1 / this.num2;
                                break;
                        }
                    }
                }
            }
            Vue.createApp(x).mount("#app")
        </script>
    </div>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

效果图

在这里插入图片描述

2. 表单事件

html代码

注意：
此时引入的是<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
        <div id="app">
            <!-- 输入框元素，用来新建待办任务 -->
            <!-- prevent是修饰符，阻止默认事件，而去触发指定的事件 -->
            <!-- @submit.prevent
            submit表示通常与form联合使用，在表单中有提交或按钮，立马触发后面
            紧跟的方法。.prevent表示阻止默认事件的修饰符，提交以后不会刷新页
            面。阻止默认事件就是指有些标签本身会存在事件，如a标签的跳转，
            form表单中的submit按钮的提交事件等，某些时候想执行自己设置的事件，
            这个时候就需要阻止标签的默认事件的执行。在vue中，只需要使用
            .prevent修饰符就可以。
            注：prevent不一定非要跟submit绑定在一起 -->
            <form action="" @submit.prevent="addTask">
                <span>新建任务</span>
                <input v-model="taskText" placeholder="请输入任务..." />
                <button>添加</button>
            </form>
            <!-- 有序列表 -->
            <ol>
                <li v-for="(item,index) in todos">
                    {{item}}
                    <button @click="remove(index)">
                        删除任务
                    </button>
                    <hr>
                </li>
            </ol>
        </div>
        <script>
            const App = new Vue({
                el:"#app",
                data(){
                    return{
                        // 待办任务
                        todos: [],
                        //当前输入的待办任务
                        taskText: ""
                    }
                },
                methods: {
                    //添加待办
                    addTask(){
                        //判断输入框是否为空
                        if(this.taskText.length == 0){
                            alert("请输入任务")
                            return
                        }
                        this.todos.push(this.taskText)
                        this.taskText = ""
                    },
                    //删除待办
                    remove(index){
                        this.todos.splice(index,1)
                    }
                }
            })
        </script>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

效果图
在这里插入图片描述

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/428174