https://www.cnblogs.com/xumqfaith/p/7743387.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
<ul v-for="item in list">
<li ref="item">{{item.name}}</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
list:[
{name:'q',age:14},
{name:'w',age:15},
{name:'e',age:16},
{name:'r',age:17},
]
},
methods:{
add() {
console.log(this.$refs); // {input1: input}
console.log(this.$refs.input1); // <input type="text"> dom對象
console.log(this.$refs.input1[0]); // undefined
console.log(this.$refs.item); // [li, li, li, li]
}
}
})
</script>
</body>
</html>
對比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<div class="example">第一 Div 元素 class="example"。</div>
<p>點擊按鈕修改第一個 Div 元素的文本信息（索引值爲 0 的 class="example")。</p>
<button onclick="myFunction()">點我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
console.log(document.getElementsByClassName("example")); // HTMLCollection
console.log(document.getElementsByClassName("example")[0]) // <div class="example">Hello World!</div>
console.log(typeof x); // object
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>