<template>
<div id='app'>
ID:<input type="text" v-model="id" v-focus><br>
Name:<input type="text" v-model="name"><br>
<button type="button" @click="add" v-color>添加</button>
<transition-group tag="ul" name="fade"> // transition 与 事件结合
<li v-for="(item,index) in list" :key="item.id" @click="del(index)">
id:{{item.id}} ,name{{item.name}}
</li>
</transition-group>
<!-- <div v-test-directive:xixi.a="msg"></div> -->
<div v-test-directive:xixi.a="{name:'lili'}"></div>
<ul>
<li>首页</li>
<li v-dropDown>公司介绍
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</li>
<li v-dropDown>公司介绍
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
import $ from "jquery"
export default {
name: 'App',
data(){
return {
id:'',
name:'',
list: [{id:1,name:'lili'},{id:2,name:'jurey'}],
msg:"我是msg",
show:false
}
},
methods: {
add() {
this.list.push({id:this.id,name:this.name})
this.id=''
this.name=''
},
del (i) {
this.list.splice(i,1)
}
},
directives :{
'color':{
inserted:function(el){
el.style.color='#0f0'
}
},
'test-directive':{
bind:function(el,binding){
el.innerHTML= "name:" + binding.name +"value:"+binding.value.name +'<br>'+
binding.expression+ '<br>'+'arg:'+binding.arg +'<br>'+JSON.stringify(binding.modifiers)
}
},
'dropDown' : {
inserted :function (el) {
function down(){
$(el).children('ul').slideDown()
}
function upp (){
$(el).children('ul').slideUp()
}
el.addEventListener('mouseenter',down)
el.addEventListener('mouseleave',upp)
}
}
}
}
</script>
<style>
#app{
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
li{
background: skyblue;
width: 800px;
/* height: 20px; */
line-height: 20px;
margin: 5px;
}
li:hover{
background: #f99;
}
.fade-enter,.fade-leave-to{
opacity: 0;
transform: translateY(30px);
}
.fade-leave-active,.fade-enter-active{
transition:1s;
}
.fade-move{
transition: 2s;
}
li ul{
display: none;
}
/* .fade-leave-active{
position: absolute;
} */
</style>