<transition>
<div class="box" v-show=‘isShow‘></div>
</transition>
.v-enter {
opacity: 0;
}
.v-enter-to {
opacity: 1;
}
.v-enter-active {
transition: all 2s;
}
.v-leave {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
.v-leave-active {
transition: all 2s;
}
<transition name=‘aa‘>
<div class="box" v-show=‘isShow‘></div>
</transition>
样式中:
.aa-enter {
opacity: 0;
}
.aa-enter-to {
opacity: 1;
}
.aa-enter-active {
transition: all 5s;
}
.aa-leave {
opacity: 1;
}
.aa-leave-to {
opacity: 0;
}
.aa-leave-active {
transition: all 5s;
}
<!-- enter-active-class leave-active-class 使用：引入第三库 必须添加基类+效果类名 -->
<transition
enter-active-class=‘animate__animated animate__bounce‘
leave-active-class = ‘animate__animated animate__backOutUp‘
>
<div class="box" v-show=‘isShow‘></div>
</transition>
name(newVal, oldVal) {
console.log(newVal, oldVal)
},
obj: {
handler(a) {
console.log(a)
},
deep: true
},
```
1.原生js案例
<!-- // 跨域；协议，域名，端口号只要有一个不一样就会出现跨域 jsonp解决
// jsonp原理:动态创建script标签，利用src属性进行跨域
// 1.动态创建script标签
// 2.给src赋值
// 3.得到数据渲染页面
// 4.回调函数(请求回来的数据)
// http://suggestion.baidu.com/su?cb=aa&wd=%27abc%E2%80%99 -->
<script>
// 1.获取元素
var oInp = document.querySelector(‘input‘)
var oUl = document.querySelector(‘ul‘)
oInp.oninput = function(a){
console.log(a)
// 1.动态创建script标签
var os = document.createElement(‘script‘);
// 2.赋值src
os.src = ‘http://suggestion.baidu.com/su?cb=aa&wd=‘+this.value
// 3.添加到页面
document.body.appendChild(os)
}
// 回调函数
function aa(res){
console.log(res)
var arr = res.s //请求回来的数据
// 清空上次请求回来的数据
oUl.innerHTML = ‘‘
for(var i =0;i<arr.length;i++){
// 动态创建li
var oLi = document.createElement(‘li‘);
// 给li添加内容
oLi.innerHTML = arr[i]
oUl.appendChild(oLi)
}
}
</script>
2、vue案例
<script>
// http://suggestion.baidu.com/su?cb=aa&wd=%27abc%E2%80%99
let vm = new Vue({
el: ‘#app‘,
data: {
search: ‘‘,
arr:[],//这是用来存储请求回来的数据
},
methods: {
},
watch: {
search() {
// 1.动态创建script标签
var os = document.createElement(‘script‘);
// 2.赋值src
os.src = ‘http://suggestion.baidu.com/su?cb=aa&wd=‘ + this.search
// 3.添加到页面
document.body.appendChild(os)
}
}
})
// 定义回调函数
function aa(res){
console.log(res)
vm.arr = res.s
}
</script>
过滤手机号码
<div id="app">
<!-- | 叫做管道符 管道符前面是需要过来的属性，过滤器后面是过滤器名称-->
{{tel | filterTel}}
<!-- 下面的是错误的，因为是局部定义的过滤器 -->
{{tel | filTel}}
</div>
<script>
// 全局过滤器 Vue.filter(过滤器名称,回调函数)
Vue.filter(‘filterTel‘,(tel)=>{
return tel.slice(0,3)+‘****‘+tel.slice(7)
})
let vm = new Vue({
el: ‘#app‘,
data: {
tel:‘15858589958‘
},
methods: {
},
})</script>
```
过滤价格
<div id="app">
价格:{{price | filterPrice}}
</div>
<script>
// 全局过滤器 Vue.filter(过滤器名称,回调函数)
Vue.filter(‘filterPrice‘,(price)=>{
return price.toFixed(2)
})
let vm = new Vue({
el: ‘#app‘,
data: {
price:29
},
methods: {
},
})
// filter: 全局过滤器 vue实例的外部定义 Vue.filter(过滤器名称，回调函数)
// 局部过滤器 vue实例中增加配置项filters 过滤器名称:function(){过滤操作}
</script>
```
过滤时间
<script>
<div id="app">
时间:{{time | filterPrice}}
</div>
// 全局过滤器 Vue.filter(过滤器名称,回调函数)
Vue.filter(‘filterPrice‘,(time)=>{
// 获取当前时间
let data = new Date(time)
// 年
let year = data.getFullYear();
// 月
let month= (data.getMonth()+1+‘‘).padStart(2,‘0‘);
// 日
let day = (data.getDate()+‘‘).padStart(2,‘0‘)
// 时
let hours = data.getHours()
//分
let min= data.getMinutes()
// 秒
let sec = data.getSeconds()
return `${year}-${month}-${day} ${hours}:${min}:${sec}`
})
let vm = new Vue({
el: ‘#app‘,
data: {
// new Date().getTime() 获取当前时间戳
time:1609917028669
},
methods: {
},
})
// filter: 全局过滤器 vue实例的外部定义 Vue.filter(过滤器名称，回调函数)
// 局部过滤器 vue实例中增加配置项filters 过滤器名称:function(){过滤操作}
</script>
```
原文：https://www.cnblogs.com/hxmw/p/14248156.html