v-on的基本使用 v-on的参数传递,v-on的修饰词 v-on扩展 条件判断(v-if,v-else,v-else-if)v-if发demo理解,v-show以及v-show
v-on的基本使用
做一个点击加减的小案例
v-on参数的传递
@click=“btn( xxx )” 这里的xxx是实参
1,如果需要传参,在页面中传的是实参,在methods中写的是形参
2.如果在页面中没有写实参,但是留有括号,在methods写了形参,会打印undefined
3.如果在页面中没有写实参,也没写括号,在methods中写了形参,打印的是event
4.如果想同时船事件和参数,那在页面下写的第一个参数是$event,第二个是参数
5.如果只船事件,name页面中可以不写括号,或者($event)
重点的有:.stop .prevent
阻止冒泡
给按钮@click.stop="btn"
@click.prevent=" " 阻止默认事件
可以串联写法,@click.stop.prevent=" "
.once只触发一次
.按键修饰符
@click.keyup.xxxx 按键
最外层写Vue.config.keyCodes.huiche = 13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="vm">
<div @click="">
<span>{{num}}</span>
<input type="button" value="+" @click="add">
<input type="button" value="+" @click="btn"><br><br>
<div @click.stop="divStop">
<input type="button" value="冒泡" @click.stop="butStop">//阻止事件冒泡
</div>
<div @click.prevent.stop="divStop">
<input type="button" value="冒泡" @click.prevent.stop="butStop">//阻止默认事件
</div><br>
<form action="www.baidu.com" method="GET">
<button @click.stop.prevent="">点击到百度</button>//可以写在一起,不跳转到百度
</form>
</div>
</div>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el: '#vm',
data() {
return {
num:0
}
},
methods: {
//num的加减
add(){
this.num++
},
btn(){
this.num--
},
butStop(){
console.log('but')
},
divStop(){
console.log('div')
}
},
})
</script>
</body>
</html>
接下来是一个简易购物车的案例
在固定数据的基础上,写了删除商品,增加数量和计算总价格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
li {
/* width: 150px; */
width: 200px;
margin:0px 30px;
text-align: center;
line-height: 40px;
}
.title {
background-color: #F7F7F7;
display: flex;
justify-content: space-between;
color: #5F6E96;
/* margin-left: 30px; */
width: 1200px;
height: 40px;
font-weight: 800;
box-sizing: border-box;
}
.footer{
background-color: #fff;
width: 1200px;
/* border: #5F6E96 1px solid; */
display: flex;
justify-content: space-between;
}
.footer li{
margin-top: 20px;
width: 200px;
font-size: 20px
}
input{
width: 50px;
height: 30px;
}
</style>
</head>
<body>
<div id="vm">
<div>
<ul class="title">
<li>游戏名称</li>
<li>出版日期</li>
<li>价格</li>
<li>购买量</li>
<li>操作</li>
</ul>
</div>
<div class="">
<ul class="footer" v-for="(book,index) in books">
<li>{{index+1}}{{books[index].bookname}}</li>
<li>{{books[index].days}}</li>
<li>{{books[index].good}}元</li>
<li>
<input type="button" value="-" @click="checkLow(index)" :disabled="impose(index)">
{{books[index].num}}个
<input type="button" value="+" @click="checkAdd(index)">
</li>
<li><input type="button" value="删除" @click="changeHidn()"></li>
</ul>
</div>
<h3>总价是:{{total}}元</h3>
</div>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el: "#vm",
data() {
return {
books: [{
bookname: '《孤岛惊魂6》',
days: "2021-9",
good: 200,
num: 1
},
{
bookname: '《行尸走肉1》',
days: '2007-9',
good: 100,
num: 1
},
{
bookname: '《看门狗2》',
days: '2021-9',
good: 300,
num: 1
},
{
bookname: '《消失的光芒2》',
days: '2022-2',
good: 250,
num: 1
},
]
}
},
methods: {
checkAdd(index){
this.books[index].num++
},
checkLow(index){
this.books[index].num--
},
changeHidn(index){
this.books.splice(index+1,1)
},
impose(index){
return this.books[index].num <= 0
}
},
computed: {
total(){
let goods = 0;
this.books.map(item=>{
goods += item.good * item.num
});
return goods
},
},
watch: {
}
})
</script>
</body>
</html>