Vue的指令综合案例
程序员文章站
2022-03-05 09:35:41
...
登录按键事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{massage}}</p>
<label for="username" v-model="username">用户名：</label>
<input type="text" v-model="username" id="username">
<label for="password" v-model="password">密码：</label>
<input type="password" v-model="password" id="password" @keyup.enter="keyEnter(event)">
<input type="submit" @click="keyEnter(event)">
<p>{{names}}</p>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
massage:'云课堂',
username:'',
password:'',
names:'',
},
methods:{
keyEnter(event){
this.names = '姓名:' + this.username + ' 密码:' + this.password;
return this.names;
},
}
})
</script>
</body>
</html>
事件处理综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{massage}}</p>
<input type="button" value="点击" @click="handClick">
<h5>请选择爱好:</h5>
<select @change="handChange">
<option value="音乐">音乐</option>
<option value="读书">读书</option>
<option value="锻炼">锻炼</option>
</select>
<br><br>
<label>
<input type="checkbox" @click="handDisabled">同意本站协议 <br><br>
</label>
<input type="submit" value="提交" :disabled=" isDisabled" @click="Clicks">
</div>
<script>
const app = new Vue({
el:'#app',
data:{
massage:'注册账户',
isDisabled:true,
},
methods:{
handClick(){
console.log("btn is clicked");
},
handChange(){
console.log('选择了' + event.target.value);
},
//复选框勾选后提交可用
handDisabled(event){
console.log(event.target.checkbox);
if(event.target.checkbox == true){
this.isDisabled = true;
}else{
this.isDisabled = false;
}
},
Clicks(){
console.log("提交成功");
}
}
})
</script>
</body>
</html>
事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{massage}}</p>
<div @click.capture="doThat">
<!-- 冒泡事件 当.prevent被点击时，调用event.preventDefault()， -->
<a href="http://www.baidu.com" @click.prevent="doThis">百度一下</a>
</div>
<!-- click事件默认的页面跳转会被阻止 -->
<a href="http://www.baidu.com" @click.prevent="doThis">百度一下</a>
<!-- submit事件不再刷新页面 -->
<form action="" @submit.prevent="onSubmit"></form>
<!-- 修饰符可以链式使用 -->
<a @click.stop.prevent="doThat">123</a>
<!-- 在添加事件监听器时使用capture模式 -->
<div @click.capture="doThis">...</div>
<!-- 只有当event.taget是元素本身时，才会调用事件处理器 -->
<!-- 如event.taget是子元素，那么doThat不会被调用-->
<div @click.self="doThat">...</div>
<!-- 只有当键码为13时 才调用 -->
<input @keyup.13="submit">
<!-- -->
<input @keyup.enter="submit">
</div>
<script>
const app = new Vue({
el:'#app',
data:{
massage:'holle Vue.js',
name:'name-tome'
},
methods:{
doThis(){
alert("鼠标事件发生了变化");
},
doThat(){
alert('父元素发生了变化');
}
}
})
</script>
</body>
</html>
上一篇： N皇后问题
下一篇： 怕npy的牛牛（双指针）