将输入框中的内容添加到列表中
为添加和删除添加动态效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
/*方法一：过渡。 只有a是可以随意定义的，a-后面的字母是固定的
含义：
显示对应class： .a-enter-active、.a-enter
当显示时：在1.5s内，从透明度0、距离左边100，过渡到默认值透明度1、距离左边0
隐藏对应class: .a-leave-active、.a-leave-to
当隐藏时：在1.5s内，从透明度1、距离左边0，过渡到透明度0、距离左边100
*/
.a-enter-active,.a-leave-active{
transition: all 1.5s;
}
.a-enter, .a-leave-to{
opacity: 0;
transform: translateX(100px);
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="mytext"/>{{mytext}}
<button @click="handelAdd">add</button>
<!--transition-group：进行多个组件之间的过渡
由于其默认状态下会在外面创建一个span标签，通过使用tag标签，将span改为ul
-->
<transition-group tag="ul" name="a">
<!--使用data作为key值，前提是每个data都不同-->
<li v-for="(data,index) in datalist" :key="data">
{{data}}----{{index}}
<button @click="handelDel(index)">del</button><!--删除操作，根据index进行删除-->
</li>
</transition-group>
</div>
<script type="text/javascript">
var v = new Vue({
el:"#app",
data:{
datalist:[],
mytext:"1111"
},
methods:{
handelAdd(){
this.datalist.push(this.mytext)
},
handelDel(index){
this.datalist.splice(index,1)
}
}
})
</script>
</body>
</html>关键代码
