目录
一:v-if 和 v-show 两个条件渲染的区别
①v-if条件渲染的时候,条件为真的被渲染,条件为假的不渲染,其实条件为假的元素根本不存在dom上,(内存中没有)
②v-show,条件为真的被渲染,条件为假的不渲染,但是它是真实在dom上存在的,只是采用样式display:none去做的切换(内存中有)
以后如果说切换的频率很高,用vshow
切换频率不高,用v-if
<div id="app">
<p v-if="isok">yes</p>
<p v-else>no</p>
<p v-show="isok">成功</p>
<p v-show="!isok">失败</p>
<button @click=" isok = !isok">取反</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isok: true
}
})
</script>
二:样式类和style的绑定
注意 :style="{这是js代码,用驼峰font-size变成fontSize}'
<!-- 绑定样式 绑定类和绑定style样式两种方式-->
<style>
.classA {
background-color: hotpink;
}
.classB {
color: yellowgreen;
}
.classC {
font-size: 80px;
}
</style>
<div id="app">
<!-- 绑定类 -->
<!--第一种情况 我不知道这个元素用的是哪个类,用哪个类是后台数据告诉我的 -->
<!-- 动态绑定class以后,静态class仍然可以使用 -->
<p :class="myClass" class="classA">杨杨1</p>
<!--第二种情况 这个元素绑定的是哪个类或者是哪些个类确定了,但是那个类生效不清除,生效不生效由数据决定 用的最多-->
<p :class="{classA:isA,classB:isB}">杨杨2</p>
<!-- 第三种情况 这个元素一下子有好多个确定的类 -->
<!-- <p class="classA classB classC">杨杨3</p> 静态数据绑定方式,直接写 v-bind就是动态数据绑定 -->
<p :class="['classA','classB','classC']">杨杨3</p>
<!-- 绑定style -->
<!-- 原样 : <p style="color:aqua;font-size: 80px;">杨杨4</p> 静态写法-->
<!-- vue里面用对象{} 并且因为是js代码,用驼峰-->
<p :style="{color:myColor,fontSize: mySize}">杨杨4</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
myClass: 'classB',
isA: true,
isB: true,
myColor: 'red',
mySize: '80px'
}
}
})
</script>
三:绑定事件监听相关(添加点击事件)
1.event事件的绑定,可以传参也可以不传参
<div id="app">
<button @click="btn1">按钮1</button>
<!-- 传入一个 $event 在vue的模板当中,事件回调函数在调用的时候可以传递$event,名字不能随意改,这个东西就是事件对象 -->
<button @click='btn1($event)'>按钮2</button>
<!-- 和楼上相同,此处的参数如果再传入一个字符串,那么如果想添加点击事件就要再传一个参数$event -->
<button @click="btn2('btn传参',$event)">按钮3</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
btn1(event) {
console.log(event.target.innerHTML) //按钮1
},
btn2(str, event) {
console.log(str) //btn传参
console.log(event.target.innerHTML) //按钮3
}
}
})
</script>
2.阻止冒泡 直接.stop
第一种:@click.stop(参数event,等等)
第二种 不建议用 ,复杂 event.stopPropagation()
<style>
.classA {
width: 200px;
height: 200px;
background-color: pink;
}
.classB {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div id="app">
<div :class="c1" @click="b1">1
<div :class="c2" @click.stop="b2">2</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
c1: " classA",
c2: "classB"
},
methods: {
b1(event) {
console.log("我是大的")
},
b2(event) {
console.log("我是小的")
// 取消冒泡(复杂不建议用)
// event.stopPropagation()
}
}
})
</script>
3.阻止超链接跳转
<div id="app">
<!-- 取消默认跳转 简单的方法-->
<a href="http://www.baidu.com" @click.prevent> 点我去百度1</a>
<!-- 取消默认跳转 复杂的方法-->
<a href="http://www.baidu.com" @click="cancelA"> 点我去百度2</a>
</div>
methods: {
// 第二种复杂的方法
cancelA(event) {
event.preventDefault() //取消链接跳转
},
}
4.键盘事件设置回车监听
<!-- 键盘事件都用在表单类元素或者document身上 -->
<input type="text" @keyup.enter="EEnter">
EEnter() {
console.log('我是回车')
}
四:自动收集表单数据
<div id="app">
<label for="1">用户名
<input type="text" id="1" v-model="userinfo.username">
</label>
<label for="2">密码
<input type="text" id="2" v-model="userinfo.password">
</label>
<br>
性别:
<label for="A">
男<input type="radio" id="A" name="sex" value="male" v-model="userinfo.gender">
</label>
<label for="B">
女<input type="radio" id="B" name="sex" value="female" v-model="userinfo.gender">
</label>
<br>
爱好:
抽烟<input type="checkbox" value="smoke" v-model="userinfo.hobby">
喝酒<input type="checkbox" value="drink" v-model="userinfo.hobby">
烫头<input type="checkbox" value="head" v-model="userinfo.hobby">
<br>
城市:
<select v-model="userinfo.cityid">
<option :value="city.id" v-for="(city,index) in citys" :key="citys.id">
{{city.id}}——{{city.name}}
</option>
</select>
<br>
自我介绍:
<br>
<textarea cols=" 30" rows="10" v-model="userinfo.desc"></textarea>
<br>
<button>提交</button>
</div>
<script>
new Vue({
el: "#app",
data: {
userinfo: {
username: '',
password: '',
gender: '',
hobby: [],
cityid: '',
desc: ''
},
citys: [
{ id: 1, name: '城市1' },
{ id: 2, name: '城市2' },
{ id: 3, name: '城市3' },
{ id: 4, name: '城市4' },
{ id: 5, name: '城市5' },
]
},
methods: {
submit() {
axios({
url: '后台给的接口地址',
method: 'post',
data: this.userinfo
})
}
}
})
</script>