vue中ref的用法
vue给我们提供一个操作dom的属性,ref。绑定在dom元素上时,用起来与id差不多,通过this.$refs来调用:
<div ref="test">test</div>
console.log(this.$refs.test)
绑定的dom对象,可以用来执行一些dom操作,比如操作样式,获取属性等:
可以看到如果绑定在普通的dom元素上,与id用法基本一样,那肯定还有别的用法,比如 循环渲染:
//简单的数组:
list:[1,2,3,4]
//绑定在循环渲染上
<ul>
<li v-for="(item,index) in list" :key="index" ref="list">
{{index}}--{{item}}
</li>
</ul>
//打印看一下这个ref="list"是什么
console.log(this.$refs.list)
ref除了这两个用法,还有另一种用法,绑定在组件标签上:
比如说我现在有个组件test:
<template>
<div style="height:200px;background:red;"></div>
</template>
<script>
export default {
name:'test',
data() {
return{
data:1
}
},
methods: {
_alert() {
alert('test-ref')
}
}
}
</script>
然后我把别的地方引用它,并绑定ref:
<test ref="test"></test>
console.log(this.$refs.test)
// html
<ul>
<li v-for="item in people" ref="refContent">{{item}}</li>
</ul>
// js
data: {
people:['三姑','四婶','五叔','六姨','七舅姥爷']
},
created: function() {
this.$nextTick(() => {
console.log(this.$refs.refContent)
})
}
// js
data: {
people:['三姑','四婶','五叔','六姨','七舅姥爷']
},
created: function() {
console.log(this.$refs.refContent)
// undefined
}
var url = item.url.split(“?”)[0];
得到:‘hell’
str="hello boy<[www.doiido.com]>byebye"
str.split("o")[0]
得到:’ b’(这里b的前面有个空格!)
str="hello boy<[www.doiido.com]>byebye"
str.split("o")[1]
得到:‘iid’(这里得到的iid是第3个o后和第4个o前之间的内容)
str="hello boy<[www.doiido.com]>byebye"
str.split("o")[3]
得到:‘hello boy<’(这里得到的hello boy<是第一个[之前的内容)
str="hello boy<[www.doiido.com]>byebye"
str.split("[")[0]