<div v-if="show" :transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS
/* 必需 */
.expand-transition {
transition: all .3s ease
height: 30px
padding: 10px
background-color: #eee
overflow: hidden
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0
padding: 0 10px
opacity: 0
}
你可以在同一元素上通过动态绑定实现不同的过渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
})
在vue中导入自定义的css文件或js文件
css文件
在main.js中导入公共的css
import '../static/css/common.css' //引入公用css
在页面中引入单独css
<style scoped>
@import '../../static/css/header.css'
</style>
Js文件
自定义js 中写：
function title(t){
alert(t)
}
export {
title //多个方法在此处json中export出去
}
页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
import {title} from './js/common.js' //可以选择需要的方法引入
export default {
data(){
return{
}
},
methods:{
clickme(){
title('你点我了')
}
}
}
</script>
或者
import Comjs from './js/common.js' //引入公用js
Vue.prototype.$comjs = Comjs//添加到vue属性中
自定义js 中写：
const comjs = {
}
comjs.title = function (title) {
alert(title)
}
export default comjs
页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
clickme(){
this.$comjs.title('你点我了')
}
}
}
</script>
可以使用一个用来引入css文件的组件
<template><div>
<style type="text/css" :src="'/path/to/' + theme + '.css'"></style>
</div>
</template>
<script>
export default {
data () {
return {
theme: 'your-custom-theme'
}
}
}
</script>
注：以上代码没有经过测试，纯理论指导。应该没问题。还有更高级一点的用法是通过vuex状态管理，篇幅比较大，这里不敲这么多代码，反正道理是一样的。
