vue2問題記錄

blacker2018發表於2018-07-02
Vue

記錄專案中遇到的問題

router-link上無法觸發點選事件

解決：改為@click.native="fn"

導航點選增加當前狀態，重新整理不消失。

思路：

1、data中新增資料isSelect為預設當前狀態

2、點選切換資料 => 切換當前狀態

3、mounted時查詢路由name更改isSelect

結構：

<router-link v-for="i in nav" :to='i.to' :key="i.id" @click.native="selectNav(i.name)">
    <div class="img"><img :src="isSelect === i.name ? i.img_on : i.img" alt="i.title"></div>
    <p :class="isSelect === i.name ? 'on' : ''">{{i.title}}</p>
</router-link>
複製程式碼

資料（注意img要加require，否則會被解析為字串）：

isSelect: 'index',
nav: [
      {
        title: '首頁',
        name:'index',
        to:'/index',
        img: require('../../assets/images/index.png'),
        img_on: require('../../assets/images/index-on.png')
      },
      {
        title: '櫃上',
        name:'shop',
        to:'/shop',
        img: require('../../assets/images/shop.png'),
        img_on: require('../../assets/images/shop-on.png')
      },
      {
        title: '訊息',
        name:'msg',
        to:'/msg',
        img: require('../../assets/images/msg.png'),
        img_on: require('../../assets/images/msg-on.png')
      },
      {
        title: '我的',
        name:'mine',
        to:'/mine',
        img: require('../../assets/images/person.png'),
        img_on: require('../../assets/images/person-on.png')
      }
    ]
複製程式碼

方法(需要在路由中加入name)：

    methods:{
      selectNav(name){
        this.isSelect=name
      }
    },
    mounted(){
      this.isSelect = this.$route.name
    }
複製程式碼

顯示餘額時，無法準確顯示小數點後兩位

如我想顯示0.00，而瀏覽器中最終顯示0查閱文件知道可以使用過濾器:實現。

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示：

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
複製程式碼

解決：

export default {
    data() {
      return data
    },
    filters:{
      keep_two_point(val){
        val = Number(val)
        return val.toFixed(2)
      }
    }
  }
複製程式碼

html:

 <p>{{money|keep_two_point}}</p>
複製程式碼

不能通過IP在其他終端（手機）訪問

github.com/vuejs/vue-c…

父元件新增scoped之後。解決在父元件中無法修改子元件樣式問題。

vue2問題記錄
實測第二種寫法報錯Unrecognised input 可能是我用less的原因。/deep/可行。 原文連結

相關文章