a description for this result is not available due to his vacuum heart.

简单的Vue场景转换

    前端

从实习以来就在使用vue做web app的开发,经常会用到场景的转换

这一篇我讲讲我现在使用的我认为比较简单的一个方法。

特别要指出,这里场景的转换指的是web app中(资源加载完成后),从引导页面进入主页面或从主页面转到其他页面这个过程。


实例

这里放一个例子,下面写的都是围绕着这个例子的转换来的。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="intro">
<p>intro text</p>
<button>continue</button>
</div>

<div class="main">
<button>continue</button>
</div>

<div class="outro">
<p>outro text</p>
</div>

首先是intro页,一个文本一个按钮,点击按钮转换至main页面。
main页面一个按钮,点击按钮转换至outro页面。
outro页面就只有一个文本。

刚开始的时候,我给每一个页面的css属性绑定了一个vue的变量,通过对这些变量的值的修改达到目。
就像这样:

1
2
3
4
5
6
7
8
9
10
<div class="{{introClass}}">
<p>intro text</p>
<button @click="introButtonClick">continue</button>
</div>
<div class="{{mainClass}}">
<button @click="mainButtonClick">continue</button>
</div>
<div class="{{outroClass}}">
<p>outro text</p>
</div>

然后在data中为其设置初始值,首先是intro页面,除了它,其他的都会被隐藏:

1
2
3
4
5
6
7
8
9
new Vue({
data: {
"introClass": "intro",
"mainClass": "hide",
"outroClass": "hide",
...
}
...
})

然后在转场的事件触发时,对这三个变量的值进行修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
methods: {
introButtonClick: function(){
this.introClass = "hide"
this.mainClass = "main"
...
},
mainButtonClick: function(){
this.mainClass = "hide"
this.outroClass = "outro"
...
},
...
}

这个缺点就太明显:场景一多,就惨了。


现在用的是这种:

1
2
3
4
5
6
7
8
9
10
<div class="{{nowClass('intro')}}">
<p>intro text</p>
<button @click="introButtonClick">continue</button>
</div>
<div class="{{nowClass('main')}}">
<button @click="mainButtonClick">continue</button>
</div>
<div class="{{nowClass('outro')}}">
<p>outro text</p>
</div>

vue里面就只用记录当前page是哪个就可以了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
new Vue({
data: {
"currentPage": "intro",
...
}
...
methods: {
nowClass: function(page){
return (page = this.currentPage) ? page : (page + " hide")
}
introButtonClick: function(){
this.currentPage = "main"
...
},
mainButtonClick: function(){
this.currentPage = "outro"
...
},
...
}
})

其实挺简单的。


想看的看,不想看的就别看。
以上。

页阅读量:  ・  站访问量:  ・  站访客数: