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>
效果图
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>
效果图
