vue中ref的用法-item.url.split(“?“)[0]-学习笔记

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]