VUE2.0学习笔记（二）：底部导航栏

用VUE2.0写一个放在微信公众号里的移动网站。

一：微信公众号里的页面是自带一行深色的标题栏的，如下图：

中间的title文字是可以自定义的，所有我们不需要为我们的vue页面做一个公共的顶部栏。

配置方法如下：

1、在main.js文件里加入以下代码：

router.beforeEach((to,from,next) => {
  window.document.title = to.meta.title;
  next()
})

2、在index.js文件里加入以下绿色部分代码，xxxx自定义文字（每新增一页，都要加）：

export default new Router({
  routes: [
    {path: '/', name: 'HelloWorld', component: HelloWorld, meta:{title: 'xxxx'}}
  ]
})

二、在HelloWorld.vue组件中添加公共的底部导航栏

（下面这个方法来自：点击打开链接）

默认首页为选中状态，黄色，之后点击哪个哪个变黄色。如下图：

代码如下：

1、首先用v-for列表循环，把图标和文字循环显示出来；同时用v-on:click绑定点击事件，并给点击事件函数rdt传递参数（当前点击的item的Text值）；再用v-bind:方法给img标签绑定src属性值，用到了三元运算符，当isSelected的值全等于item的Text值时（即被选中时），src值等于ImgSrc1（黄色图标），否则src值等于ImgSrc（浅灰色图标）。<span>标签用v-bind:class动态绑定class值，也用了三元运算符，当isSelected的值全等于item的Text值时（即被选中时），class为classA，否则则为classB。

<ul id="footer">
  <li v-for="item in items" v-on:click="rdt(item.Text)">
    <div class="images"><img v-bind:src="isSelected === item.Text ? item.ImgSrc1 : item.ImgSrc" /></div>
    <span v-bind:class="isSelected === item.Text ? classA : classB">{{item.Text}}</span>
  </li>
</ul>

2、JS部分代码，首先初始化isSelected的值为“首页”，使首页图标一开始就是黄色的。
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      isSelected: '首页',
      classA: 'classA',   //给classA赋值为classA
      classB: 'classB',   //给classB赋值为classB
      items: [
        {ImgSrc: '../../static/images/home-icon.png', ImgSrc1: '../../static/images/home-icon-selected.png', Text: '首页'},
        {ImgSrc: '../../static/images/money-icon.png', ImgSrc1: '../../static/images/money-icon-selected.png', Text: '理财'},
        {ImgSrc: '../../static/images/discover-icon.png', ImgSrc1: '../../static/images/discover-icon-selected.png', Text: '发现'},
        {ImgSrc: '../../static/images/mine-icon.png', ImgSrc1: '../../static/images/mine-icon-selected.png', Text: '我的'}
      ]
    }
  },
  methods: {
    rdt: function(Text){
      this.isSelected = Text;
    }
  }
}
</script>