<template>
<div>
<button @click="fn">点击</button>
<span v-isshow="false">1111111</span>
<transition name="bounce" :appear="true">
<div v-show="flag" class="box"></div>
</transition>
111
<img v-defaultImg="imgurl" src="https://www.ssfiction.com/wp-content/ups/2020/08/20200805_5f2b1669e9a24.jpg" alt="">
</div>
</template>
<script>
// 自定义指令，除了vue本身为咱们提供得指令，我们还可以自己实现一些指令
// 封装一个图片如果成功展示图片，如果没有成功，展示默认图片
export default {
data(){
return {
flag:true,
imgurl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200331%2F4ec38d78be8946cd8b4a2cccee6208ca.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659078902&t=2cebbfc8eff31a874f6f40137f12bef0"
}
},
methods:{
fn(){
this.flag = !this.flag
}
},
directives:{ // 这个对象就用于放自定义指令
isshow:{
inserted(el,binding){ // iseerted:function(){},el是绑定自定义指令得dom节点
console.log(el,binding.value);
if (binding.value == true) {
el.style.display = "block"
}
if (binding.value == false) {
el.style.display = "none"
}
},
},
defaultImg:{
inserted(el,binding){
console.log(el);
console.log(binding)
el.onerror = function(){
el.src = binding.value
}
}
}
}
}
</script>
<style>
.box {
width: 200px;
height: 200px;
background: red;
}
/* 动画最开始前得状态，相当于@keyfroms的百分之0,刚进入得时候 /
.bounce-enter {
transform: translateX(-100%);
background: red;
}
/ 进入已经完成了 /
.bounce-enter-to {
transform: translateX(0);
background: yellow;
}
/ 整个过程 */
.bounce-enter-active,.bounce-leave-active {
transition: all 1s;
}
.bounce-leave {
transform: translateX(0);
}
.bounce-leave-to {
transform: translateX(-100%);
}
</style>
