vue基础(四)ref 和 数组 的使用
一、$refs的使用每个组件实例上,都包含一个$ref对象,可用来获取DOM元素或组件的引用。//使用ref属性,给对应组件添加引用名称<my-counter ref="counterRef"></my-counter><button @click="getRef">获取 $refs 的引用</button>methods:{getRef(){//通
·
一、$refs的使用
1、ref引用dom组件实例
每个组件实例上,都包含一个$ref对象,可用来获取DOM元素或组件的引用。
//使用ref属性,给对应组件添加引用名称
<my-counter ref="counterRef"></my-counter>
<button @click="getRef">获取 $refs 的引用</button>
methods:{
getRef(){
//通过this.$refs.引用名称 可以引用组件实例
console.log(this.$refs.conterRef)
//引用到组件的实例之后,就可以调用组件上的 methods 方法
this.$refs.counterRef.add()
}
}
2、this.$nextTick的使用场景
$nextTick(cb)方法把cb回调推迟到下一个DOM更新周期之后执行
等DOM组件更新完成之后,再执行cb回调函数,来保证操作到最新的DOM元素。
this.$nextTick(() =>{
this.$refs.changeNum.focus()
})
二、数组的使用
1、some 循环
【可以中途终止循环,可用于在数组中寻找元素】
<script>
const arr = ['张三', '李四', '王五', '赵六']
//forEach循环一旦开始就无法中途停止
arr.forEach((item, index) => {
if (item === '王五') {
console.log(index)
return
}
})
arr.some((item, index) => {
console.log(index)
if (item === '王五') {
return true
}
})
</script>
2、every 循环
【判断数组的每一项是否满足要求】
<script>
const arr = [
{ id: 1, name: '山楂', state: true },
{ id: 2, name: '洋芋', state: true },
{ id: 3, name: '果果', state: true }
]
const result = arr.every(item => item.state)
console.log(result)
</script>
3、reduce 循环
【需要对循环元素进行累计等计算时,可以使用这个循环】
//案例:计算选中的商品合计金额,state代表选中状态
<script>
const arr = [
{ id: 1, name: '山楂', state: true, price: 10, count: 1 },
{ id: 2, name: '洋芋', state: false, price: 20, count: 2 },
{ id: 3, name: '果果', state: true, price: 80, count: 3 }
]
// arr.filter(item => item.state).reduce((累加的结果,当前循环项) => {}, 初始值)
const result = arr.filter(item => item.state).reduce((amt, item) => {
return amt += item.price * item.count
}, 0)
console.log(result)
</script>
本文借鉴b站课程而记录黑马程序员vue前端基础
更多推荐
已为社区贡献7条内容
所有评论(0)