記錄項(xiàng)目中遇到的問題
router-link上無法觸發(fā)點(diǎn)擊事件
解決：改為@click.native="fn()"
導(dǎo)航點(diǎn)擊增加當(dāng)前狀態(tài)，刷新不消失滤愕。
思路：
1温算、data中添加數(shù)據(jù)isSelect為默認(rèn)當(dāng)前狀態(tài)
2、點(diǎn)擊切換數(shù)據(jù) => 切換當(dāng)前狀態(tài)
3间影、mounted時(shí)查詢路由name更改isSelect
結(jié)構(gòu)：
<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>
數(shù)據(jù)（注意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
}
顯示余額時(shí)，無法準(zhǔn)確顯示小數(shù)點(diǎn)后兩位
如我想顯示0.00魂贬，而瀏覽器中最終顯示0
查閱文檔知道過濾器:可以實(shí)現(xiàn)蔓搞。
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化随橘。過濾器可以用在兩個(gè)地方：雙花括號插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部锦庸，由“管道”符號指示：
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
解決：
js:
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在其他終端（手機(jī)）訪問
https://github.com/vuejs/vue-cli/issues/683
父組件添加scoped之后机蔗。解決在父組件中無法修改子組件樣式問題。
實(shí)測第二種寫法報(bào)錯(cuò)
Unrecognised input 可能是我用less的原因。/deep/可行萝嘁。原文鏈接
