本文通过一个具体的示例介绍了如何使用Vue.js进行列表渲染，并利用Ref特性获取DOM元素，展示了Vue.js中数据绑定及DOM操作的基本用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head>
<body>
<ul id="demo">
<li v-for="item in list" ref="rLi">{{item}}</li>
</ul>
<script type="text/javascript">
new Vue({
el:'#demo',
data(){
return{
list:[0,1,2,3,4]
}
},
created(){
this.$nextTick( function() {//先渲染dom后执行console
console.log(this.$refs.rLi)//ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
})
},
methods:{ }
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head>
<body>
<ul id="demo">
<li v-for="item in list" ref="rLi">{{item}}</li>
</ul>
<script type="text/javascript">
new Vue({
el:'#demo',
data(){
return{
list:[0,1,2,3,4]
}
},
created(){
this.$nextTick( function() {//先渲染dom后执行console
console.log(this.$refs.rLi)//ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
})
},
methods:{ }
})
</script>
</body>
</html>
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
