vue中同时监听多个参数的实现
如何同时监听多个参数
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
}
}
在调用，可读性较好
以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。
【JQ】无限滚动条-jquery.infinitescroll.j
query多选下拉框插件 jquery-multiselect(
手机站jQuery自动完成插件autoComplete.js
js/jQuery教程阅读排行
-
【JQ】无限滚动条-jquery.infinitescroll.js使用说明
2014-05-05
-
query多选下拉框插件 jquery-multiselect(修改)
2014-06-15
-
2016-06-15
-
毕向东Html、css、JavaScript视频教程(黑马程序员课程)
2013-04-25
-
手机站jQuery自动完成插件autoComplete.js
2016-02-25
-
2012-08-23
-
2013-04-25
-
2013-04-25
最新文章
-
2022-04-08
-
2022-04-08
-
2022-04-08
-
2022-04-08
-
2022-04-08
-
2022-04-08
-
vue-seamless-scroll无缝滚动组件使用办法详细介绍
2022-04-08
-
2022-04-08
热门源码
