大学生笔记
/ sex中1：男，2女。
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
border: 5px solid red;
}
.box2{
width: 200px;
height: 200px;
border: 5px solid orange;
}
.box3{
width: 100px;
height: 100px;
display: inline-block;
border: 5px solid pink;
}
</style>
</head>
<body>
<div id="app">
<!-- 事件修饰符
.prevent阻止浏览器默认行为
.stop阻止冒泡事件
.once只能触发一次
.capture捕获模式 ，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发
打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，
先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）
.self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式)
给元素设置self后，点击当前设置的自身元素会触发
点击设置self的子类，会跳过设置了self的元素-->
<!-- event.stopPropagation();阻止冒泡事件 -->
<a href="" @click.prevent="func1()">链接</a>
<div @click.self="func2()" class="box1">
我是div
<p @click.self="func3()" class="box2">
我是p
<span @click="func4()" class="box3">我是span</span>
</p>
</div>
<!-- v-model修饰符
v-model.lazy失去焦点后提交数据(data)
v-model.number可以将字符串转换为有效数字 "1"==1
v.model.trim清除前后空格 -->
<form action="" method="" @click.prevent="func()">
姓名：<input type="text" v-model.trim="dataList.userName">
<br>
<!-- .number可以将字符串转换为有效数字 "1"==1 -->
<!-- 注：通常使用v-model绑定表单v-model="",
v-model:value="" 需要设置默认值-->
年龄1：<input type="number" v-model.number="dataList.age">
年龄2：<input type="number" v-model="dataList.ages">
<br>
性别：
<label for="nan">男</label>
<input type="radio" id="nan" name="1" v-model="dataList.sex" value="1">
<label for="nv">女</label>
<input type="radio" id="nv" name="1" v-model="dataList.sex" value="2">
<br>
<!-- .lazy失去焦点后提交数据(data) -->
手机号1：<input type="tel" v-model.lazy="dataList.iphone">
{{dataList.iphone}}
手机号2：<input type="tel" v-model="dataList.iphones">
{{dataList.iphones}}
<br>
爱好：
<label for="sing">唱</label>
<input type="checkbox" id="sing" v-model="dataList.hobby" value="1">
<label for="dance">跳</label>
<input type="checkbox" id="dance" v-model="dataList.hobby" value="2">
<label for="rap">rap</label>
<input type="checkbox" id="rap" v-model="dataList.hobby" value="3">
<label for="basketball">篮球</label>
<input type="checkbox" id="basketball" v-model="dataList.hobby" value="4">
<br>
<input type="submit" value="提交">
<!-- <button>确定</button> -->
</form>
</div>
</body>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
data() {
}
})
Vue.config.productionTip = false;
var vm = new Vue({
el:"#app",
data() {
return {
dataList:{
userName:"",
age:0,
ages:0,
// sex中1：男，2女
sex:"",
iphone:"",
iphones:"",
// hobby：1：2,3,4
hobby:[]
}
}
},
methods: {
func(){
console.log(this.dataList.age+this.dataList.ages);
console.log(typeof this.dataList.age);
console.log(typeof this.dataList.ages);
console.log(this.dataList);
},
func1(){
console.log(111111111111111);
},
func2(){
console.log("div元素");
},
func3(){
// console.log(event);
// event.stopPropagation();
console.log("p元素");
},
func4(){
console.log("span元素");
}
},
})
</script>
</html>
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)