<ul>
<li v-for="n in 10" ref="numbers">{{ n }}</li>
</ul>
当你点击按钮时，$refs属性将在浏览器控制台中输出：
正如上图所看到的一样，把numbers属性添加到了对象中，但需要注意该值的类型。与之前看到的DOM元素不同，它实际上是一个数组，一个DOM元素的数组。当使用ref属性和v-for指令时，Vue会迭代所有DOM元素，并将它们放置在数组中。在这种情况下，这就输出了10个li的DOM元素的数组，因为我们迭代了10次。每个元素都可以像我们之前看到的那样使用。
上面通过简单的示例了解了Vue中的$refs在Vue中是怎么访问到DOM元素的。接下来看一个简单的示例。
在Web中Modal组件是经常可见的一个组件。来看看$refs怎么来来控制Modal的打开和关闭。
<!-- HTML -->
<div id="app">
<div class="actions">
<button @click="toggleModal('new-item')">添加列表</button>
<button @click="toggleModal('confirm')">删除列表</button>
</div>
<modal ref="new-item">
<p>添加新的列表</p>
<div slot="actions">
<button>保存</button>
<button>取消</button>
</div>
</modal>
<modal ref="confirm">
<p>删除列表？</p>
<div slot="actions">
<button>删除</button>
<button>取消</button>
</div>
</modal>
<script type="x-template" id="modal-template">
<transition name="modal-toggle">
<div class="modal" v-show="toggle">
<button class="modal__close" @click="close">X</button>
<div class="modal__body">
<h1>Modal</h1>
<slot>这是一个Modal，是否需要添加新的内容?</slot>
</div>
<div class="modal__actions">
<slot name="actions">
<button @click="close">关闭</button>
</slot>
</div>
</div>
</transition>
</script>
</div>
// JavaScript
let Modal = Vue.component('modal', {
template: "#modal-template",
data () {
return {
toggle: false
}
},
methods: {
close: function() {
this.toggle = false;
}
}
});
let app = new Vue({
el: "#app",
methods: {
toggleModal(modal) {
this.$refs[modal].toggle = !this.$refs[modal].toggle;
}
}
});
效果如下：
