vue项目遇到的问题记录

原创 Been101 随笔 vue 332阅读 2017-11-24 14:16:22 举报

1、
@mixin bg-img($name){
background-image:url("#{$name}@2x.png");
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
background-image:url("#{$name}@3x.png");
}
background-size:cover;
}

2、
export default new Router({
mode: 'history', //去掉路由产生的!#,让路由变得漂亮
linkActiveClass: 'active', // 自定义路由激活状态时的类名
routes: [
{
path: '/',
redirect:"/goods", // 一进入页面,就定位到 goods 组件
},{
path: '/goods',
name: 'Goods',
component: Goods
}
]
})

3、
//多行垂直居中
<li>
<span>这里的内容可以有多行</span>
</li>

li{
display:table;
}
li span{
display:table-cell;
vertical-align:middle;
}
4、
//vue实例中
props:{
desc:{
type:String,
default:"描述"
}
}
data (){
desc:"描述"
},
computed :{
desc (){
return "描述"
}
}

这三个属性中不能重复声明,会报错
5、
vue实例中可以用
Vue.set(target,key,value);
组件中用this.$set(target,key,value);
6、
num>0时并点击按钮时div显示
num=0时,div自动隐藏
点击按钮时div隐藏展示两种状态进行切换
<div v-show="showFlag"></div>
<button @click="divShow"></button>
data () {
return {
show:true
}
}
computed:{
showFlag(){
if(!this.num){
this.show = false;
return false;
}
return this.show;
}
}
methods:{
divShow(){
if(this.num){
this.show = !this.show;
}
}
}
7、应用到组件上的过度动画
<transition name="slideLeft">
<my v-show="showFlag" ref="my" @backClick="back"></my>
</transition>
<button @click="show" >按钮</button>

父组件中
data(){
showFlag:false
},
methods:{
show (){
this.showFlag = true;
},
back(){
this.showFlag = false;
}
}

<style>
.slideLeft-enter-active,.slideLeft-leave-active{
transition:all 0.5s;
}
.slideLeft-enter,.slideLeft-leave-to{
transform:translate3d(100%,0,0);
}
</style>

子组件
<template>
<span @click="back"></span>
</template>

methods:{
back(){
this.$emit("backClick","");
}
}

8、根据按钮切换符合条件的信息
item= {
"type":1
}
item= {
"type":2
}
<button click="select(0)">全部</button>
<button click="select(0)">type为1</button>
<button click="select(0)">type为2 </button>
<li v-for =" item in arr" v-show="showType(item.type) " >{{item.type}}</li>

data(){
return {
selectType:0;
}
}
methods:{
select (tpe){
this.selectType = type;
},
showType (type){
if( this.selectType == type){
return true;
}else{
if( this.selectType ==0 ){
return true;
}
return false;
}
}
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复