<template>
<div class="hello">
<ul>
<li v-for="item in list">{{$index}}--{{$key}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
list:['姓名','性别','年龄','语文','数学','英语','总分']
}
}
}
</script>

<template>
<div class="hello">
<ul>
<li v-for="(index,item) in list">{{index}}--{{item}}</li>
</ul>
</div>
</template>

二、$refs和$els

<template>
<div class="hello">
<div class="v-t" v-el:v-t>
<button @click="getElement">测试</button>
</div>
</div>
</template>
<script>
export default {
methods:{
getElement(){
let element=this.$els.vT
console.log(element)
}
}
}
</script>

<template>
<div class="hello">
<div class="v-t" ref="vt">
<button @click="getElement">测试</button>
</div>
</div>
</template>
<script>
export default {
methods:{
getElement(){
let element=this.$refs.vt
console.log(element)
}
}
}
</script>

<template>
<div class="hello">
<div class="v-t" ref="v-t">
<button @click="getElement">测试</button>
</div>
</div>
</template>
<script>
export default {
methods:{
getElement(){
let element=this.$refs['v-t']
console.log(element)
}
}
}
</script>

关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模版中做数据绑定。----引用自vue.js官方文档

三、transition

Vue 提供了 transition 的封装组件，比如我们现在要实现一种效果：点击一个按钮之后，缓慢出现一个有背景颜色的div，点击div里面的关闭按钮之后，div缓慢消失。有一种写法是这样的

<template>
<div class="hello">
<button @click="show">开启</button>
<div class="box" v-show="this.tf" transition="fade">
<button @click="hide">关闭</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
tf:false
}
},
methods:{
show(){
this.tf=true
},
hide(){
this.tf=false
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.box{
width:177px;
height:177px;
transition:all 0.5s
}
.fade-transition{
opacity:1;
background:rgba(7,17,27,0.8);
}
.fade-enter,.fade-leave{
opacity:0;
background:rgba(7,17,27,0);
}
</style>

<template>
<div class="hello">
<button @click="show">开启</button>
<transition>
<div class="box" v-show="this.tf">
<button @click="hide">关闭</button>
</div>
</transition>
</div>
</template>
<script>
export default {
data(){
return{
tf:false
}
},
methods:{
show(){
this.tf=true
},
hide(){
this.tf=false
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.box{
width:177px;
height:177px;
background:rgba(7,17,27,0.8);
}
.v-enter-active,.v-leave-active{
transition: opacity 0.5s
}
.v-enter,.v-leave-to{
opacity: 0
}
</style>

四、结语