記錄專案中遇到的問題
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在其他終端(手機)訪問
父元件新增scoped之後。解決在父元件中無法修改子元件樣式問題。
實測第二種寫法報錯Unrecognised input
可能是我用less
的原因。/deep/
可行。
原文連結