vue中同时监听多个参数的实现
目录
- 如何同时监听多个参数
- data中定义一个对象
- 完整代码
- vue事件监听,条件判断
- 事件监听 v-on
- 条件判断
如何同时监听多个参数
vue使用watch同时监听多个参数，其中有任意一个参数发生改变时，都会被监听到需要使用到计算属性computed与监听watch
data中定义一个对象
data(){
return{
obj:{
name:'xpf',
gender:'male',
age:24
}
}
}
computed中：将需要监听的参数放入一个新变量中
computed:{
'newParams':function(){
const {name,age} = this.obj
return {name,age}
}
},
watch中：监听新的变量
watch:{
newParams:function(){
alert(1)
}
},
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>watch同时监听多个属性</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<div @click="changeObj">点我</div>
</div>
<script>
new Vue({
el:'#app',
data(){
return{
obj:{
name:'xpf',
gender:'male',
age:24
}
}
},
computed:{
'newParams':function(){
const {name,age} = this.obj
return {name,age}
}
},
watch:{
newParams:function(){
alert(1)
}
},
methods:{
changeObj(){
// this.obj.name = 'xx'
this.obj.age = 21
}
}
})
</script>
</body>
</html>
vue事件监听,条件判断
事件监听 v-on
语法糖@
1. 基本的使用法法
<div id="add">
点击次数{{counter}}
<button @click = "add">+</button> <!--v-on:click = "" 语法糖 -->
<button @click = "dec">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const add = new Vue({
el:'#add',
data:{
counter:0
},
methods:{
add:function(){
console.log('添加了');
this.counter++
},
dec:function(){
console.log('减少了');
this.counter--
}
}
})
</script>
2. 事件监听带参数的使用方法
不带参数，写函数时，小括号可写可不写
<button @click = "one">按钮1</button> <button @click = "one()">按钮2</button>
带有参数时，写函数时，小括号要写，传进的参数也要写
<button @click = "two">按钮2</button> <!-- 默认输出 浏览器生产的event事件对象 --> <button @click = "two()">按钮3</button> <!-- 输出 undefind --> <button @click = "two(123)">按钮4</button> <!-- 输出 123 -->
即带参数有带event
<button @click = "three(123,$event) ">按钮5</button>
在小括号里添加$event可即添加参数又添加event事假
3.事件对象的修饰符
.stop 相当于事件对象的stopPropagaton，阻止冒泡事件
<div @click = "one">父亲 <button @click.stop = "two">儿子</button> </div>
.prevent 阻止默认事件 preventDefault
<a href="https://www.baidu.com/" rel="external nofollow" @click.prevent = "two">百度一下</a>
keyup 监听某个键盘键帽
.enter 只监听回车键
<input type="text" @keyup= "two"> <input type="text" @keyup.enter = "two">
.once只监听一次
<button @click.once = "two">按钮</button>
条件判断
1.v-if的基本使用
<div id="add">
<div v-if = "true">{{message}}</div>
<div v-if = "false">{{name}}</div>
<div v-if = "isShow">
<h2>ccc</h2>
<h2>ccc</h2>
<h2>ccc</h2>
<h2>ccc</h2>
</div>
为true显示，为false隐藏，可设置一个变量isShow来控制
2.v-if和v-else使用
<div id="add"> <h2 v-if = "isShow">我是你爸爸</h2> <h2 v-else>不，我才是你爸爸</h2> </div>
两者只能显示一个当变量isShow为true时，else隐藏，同理相反
3.v-if和v-else-if和v-lese使用
<h2 v-if = "message >=90"> 优秀 </h2> <h2 v-else-if = "message >=80"> 良好 </h2> <h2 v-else-if = "message >=70"> 及格 </h2> <h2 v-else> 不及格 </h2>
3个结合可读性差，不建议
可在computed里封装一个函数
computed: {
result(){
let num = " "
if (this.message >=90) {
num = '优秀'
}else if(this.message >= 80){
num = '良好'
}else{
num = "不及格"
}
return num
}
}
在调用，可读性较好
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Vue监听数据的原理详解
目录 一.引入 二.监测对象 2.1 为什么需要监测对象 2.2数据代理 2.3 对象监测相关API之Vue.set 2.4 为对象赋多个新值 三.监测数组 总结 一.引入 首先画一个简单的图. 我们在写Vue的时候总会和数据打交道,将我们的目标数据写在data中,然后在template的差值表达式中通过{{xxx}}的格式可以响应式的渲染数据.当data中的数据改变时,这里橙色的线就会引起差值表达式的变化.那么问题来了,我们如何监测到data中数据的改变呢?这里就涉及到了Vue监测数据的问题.
-
vue实现路由监听和参数监听
1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu": this.$router.push({ name: "AppAccountInfo", }); break; //在菜单路由上存储各种需要信息 case "publicDocInfoMenu": //菜单code: publicDocInfoMenu data.i
-
vue中监听路由参数的变化及方法
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get
-
vue中同时监听多个参数的实现
目录 如何同时监听多个参数 data中定义一个对象 完整代码 vue事件监听,条件判断 事件监听 v-on 条件判断 如何同时监听多个参数 vue使用watch同时监听多个参数,其中有任意一个参数发生改变时,都会被监听到需要使用到计算属性computed与监听watch data中定义一个对象 data(){ return{ obj:{ name:'xpf', gender:'male', age:2
-
vue中watch监听不到变化的解决
目录 watch监听不到对象内部的变化 解决方法: watch的handler方法的两个参数值相同 解决方法: 全部代码 watch监听不到对象内部的变化 有的时候vue会出现这种现象,无法监听到复杂对象内部的变化:当对象里面原本有某一个属性,并对这个属性操作时,watch是可以监听到当前属性的变化的.但是,若对象里面本没有这个属性的时候,在操作时将属性添加进去,同时包括之后对这个属性的操作,watch是都检测不到的.这是因为vue的watch会在初始化的时候通过object.definePro
-
关于vue中如何监听数组变化
前言 前段时间学习了关于vue中响应式数据的原理,(并作了学习笔记vue响应式原理),其实是通过Object.defineProperty控制getter和setter,并利用观察者模式完成的响应式设计.那么数组有一系列的操作方法,这些方法并不会触发数组的getter和setter方法.那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~ 源码部分 https://github.com/vuejs/vue/blob/dev/src/core/observer/array.
-
vue中watch监听对象中某个属性的方法
目录 immediate 和 handler deep 深度监听 以currentParams为例,监听selOrgId属性 immediate 和 handler watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行.如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性. 'currentParams.selOrgId': { handler(newV, oldV) { console.log("watch", ne
-
vue中实现监听数组内部元素
目录 vue监听数组内部元素 我们有两种办法解决此问题 vue如何监听数组的变化 vue监听数组内部元素 在VUE中,对数组的监听是浅监听,也就是它只能监听到数组的长度或者有无的变化,当我们修改数组中的某一个值时,也就是数组的长度状态并没有改变时,在正常情况下它是无法监听到的,在watch中我们知道可以使用deep属性进行深监听,那么在其他情况下呢? 我们有两种办法解决此问题 1.通过原生的js对数组先进行切割,然后在添加新的内容(也就是我们要修改的内容) array.splice(i, 1,
-
vue中对监听esc事件和退出全屏问题的解决方案
目录 对监听esc事件和退出全屏问题的解决 下面是全屏的完整代码 element+vue全屏与退出全屏(监听ESC改样式) 一.效果 二.代码 对监听esc事件和退出全屏问题的解决 vue 的项目中使用了 h5 的全屏 API,在使用esc键退出全屏时,默认调用“ document.exitFullScreen() ” 直接退出,想要做监听并设置业务,需要监听屏幕size变化来出发事件 mounted() { let that = this window.addEven
-
Vue中watch监听第一次不触发、深度监听问题
目录 watch监听第一次不触发.深度监听 第一次不触发 例如 vue watch使用无效问题 watch监听第一次不触发.深度监听 第一次不触发 handler:其值是一个回调函数.即监听到变化时应该执行的函数. deep:其值是true或false:确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到.) immediate:其值是true或false:确认是否以当前的初始值执行handler的函数 例如 我将父组件中的WatchId传递到这个子组件页面我要根据
-
Vue3中watch监听使用详解
目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export
-
vue父组件监听子组件数据更新方式(hook)
目录 vue父组件监听子组件数据更新 this.$on(‘hook : 生命周期钩子’, () => {}) @hook:生命周期钩子=“触发的函数” 监听子组件内数据变化,父组件绑定change事件 子组件 父组件 大功告成 vue父组件监听子组件数据更新 this.$on(‘hook : 生命周期钩子’, () => {}) 可以监听执行生命周期钩子,适用场合如: data(){ return { itemID:'', } } mounted(){