事件,条件,列表渲染,计算属性与侦听器,组件之间的通信
程序员文章站
2022-03-06 12:44:44
...
事件绑定
事件指令v-on:或@
事件修饰符:对当前的行为进行干预
@click.prevent 阻止默认行为
@click.stop阻止冒泡
<div class="app">
<p onclick="alert('hello')">
<a href="https://php.cn" @click.prevent.stop="this.url=$event.target.href">vue1显示网络地址:</a>
<span class="url">{{url}}</span>
</p>
</div>
const app = Vue.createApp({
data() {
return {
url: null,
};
},
}).mount(".app");
列表渲染
v-for,对应原生的for-of
一定要加:key ,为了借助diff算法,key必须要选择永远唯一的值
<div class="app">
<ul>
<li v-for="(user,index) of users" :key="index">{{user.name}}:{{user.email}}</li>
</ul>
</div>
const app = Vue.createApp({
data() {
return {
users: [{
name: "李同学",
email: "li@php.cn",
}, {
name: "张同学",
email: "zhang@php.cn",
}, {
name: "郭同学",
email: "guo@php.cn",
}, ],
};
},
}).mount(".app");
条件渲染
<div class="app">
<p v-if="flag">{{message}}</p>
<button @click="flag=!flag" v-text="flag? '隐藏':'显示'"></button>
<p v-if="point>=1000 && point<2000">{{grade[0]}}</p>
<p v-else-if="point>=2000 && point<3000">{{grade[1]}}</p>
<p v-else-if="point>=3000 && point<4000">{{grade[2]}}</p>
<p v-if="point>=4000 && point<5000">{{grade[3]}}</p>
<p v-else="point<1000">{{grade[4]}}</p>
</div>
const app = Vue.createApp({
data() {
return {
message: "今天是孩子放假的第一天,家里可热闹了",
flag: false,
grade: ["纸片会员", "木头会员", "铁皮会员", "金牌会员", "非会员"],
point: 500,
};
},
}).mount(".app");
计算属性与侦听器
计算属性
computed: {
payAmount: {
get() {
return this.price * this.num;
},
},
}
侦听器属性
watch: {
// current:新值/当前值 origin:原值/旧值
payAmount(current, origin) {
console.log(current, origin);
switch (true) {
case current > 10000 && current < 20000:
this.disAmount = this.payAmount * 0.95;
break;
case current >= 20000 && current < 30000:
this.disAmount = this.payAmount * 0.9;
break;
case current >= 30000 && current < 40000:
this.disAmount = this.payAmount * 0.85;
break;
case current >= 40000:
this.disAmount = this.payAmount * 0.8;
break;
default:
this.disAmount = this.payAmount;
}
this.difAmount = this.payAmount - this.disAmount;
},
},
组件与组件的通信
1 向子组件传参:props:[]
2 子组件向父组件通信
2.1子组件:$emit(customEvent,…args)
2.2父组件:@customEvent
<div class="app">
<!-- vue指令-》自定义属性 -->
<div v-text="'hello'"></div>
<button-counter username="litong" email="lt@qq.cn" @review-count="review"></button-counter>
</div>
<template id="counter">
<button @click="count++">点赞:{{count}}</button>
<p>用户名:{{username}}</p>
<p>邮箱:{{email}}</p>
<!-- $emit(自定义事件,向父级组件传递的参数) -->
<button @click="$emit('reviewCount',this.count)">评价</button>
</template>
const app = Vue.createApp({
methods: {
review(count) {
console.log(count);
if (count >= 20) {
alert("我获得很多赞了");
}
},
},
});
// 注册组件
app.component("ButtonCounter", {
// props:父级向子级传参
props: ["username", "email"],
template: `#counter`,
data() {
return {
count: 0,
};
},
});
app.mount(".app");
上一篇: 数组常用api
推荐阅读
-
VUE的事件绑定修饰符练习及vue列表渲染及条件渲染练习,vue键盘事件+数组方式参数的传递学习及vue的计算属性访问器属性及侦听属性练习以及vue注册组件自定义标签及子组件向父组件传参及父组件向父组件传参
-
VUE的事件绑定修饰符练习及vue列表渲染及条件渲染练习,vue键盘事件+数组方式参数的传递学习及vue的计算属性访问器属性及侦听属性练习以及vue注册组件自定义标签及子组件向父组件传参及父组件向父组件传参
-
vue中的事件,条件渲染,列表渲染,计算属性,侦听器与组件通信
-
事件,条件,列表渲染,计算属性与侦听器,组件之间的通信
-
vue中的事件,条件渲染,列表渲染,计算属性,侦听器与组件通信
-
事件,条件,列表渲染,计算属性与侦听器,组件之间的通信