解决vue中使用document.getElementById()拿到的是同一个值的问题（两种方法），即在vue中大容器里面，获取其中小容器的属性值

一、问题描述

 1.实现功能：点击每一个大的框，获取里面的小框的值（ct01......ct07等）

 2.vue里面页面的代码（通过v-for循环得到数据，展示到页面，实现一个列表功能）

            
            
            
            
              
             

              

                
                
                

                  

                    
{{ item.point }}
                  
                  

                   
                     {{ item.createTime }} 
                  
                

                
                

                  
 
                 
                      

                   
                     {{ item.temp + "℃" }} 
                  
                
              
                   
            
          

二、使用document.getElementById()来取值（获取不到想要结果）

（1）绑定点击事件： 

（2）点击函数： 

（3）点击打印的结果（只会打印第一个card里面的ct01）：  

 

三、解决方法

1.使用document.getElementsByName(）来取值

（1）给p标签加一个name属性

 （2）点击函数： 

 （3）点击打印的结果：  

 2.使用document.getElementsByTagName(）来取值

（1）点击函数：

 

  （2）点击打印的结果：