vue_logo.png

Vue使用中遇到的問(wèn)題總結(jié)記錄。內(nèi)容比較基礎(chǔ)，無(wú)奈我是菜鳥

1、Vue中字符串換行不起作用

<div>{{item.content}}</div>

content字符串很長(zhǎng)，內(nèi)部的換行符\n不起作用。

由于Vue將其插值渲染成div內(nèi)部文本后，文本并不換行，換行符顯示為一個(gè)空格。解決：

<div style="white-space: pre-wrap;">{{item.content}}</div>

其中div不能換行，如果換行后 首行縮進(jìn)的距離很大。其實(shí)設(shè)置為pre即可使換行符發(fā)揮作用，但這時(shí)文本在div寬度不足時(shí)不會(huì)自動(dòng)換行，而是撞破邊界延伸到div外部去，所以還得加上wrap。

2、Vue數(shù)據(jù)對(duì)象嵌套對(duì)象時(shí)的實(shí)例聲明

var baseInfo = new Vue({
    el:'#id',
    data:{
        item: {}
    }

item中包含其他對(duì)象必須先聲明如下：

var baseInfo = new Vue({
    el:'#id',
    data:{
        item: {
            user:{}
        }
    }

否則會(huì)報(bào)錯(cuò)

TypeError: Cannot read property 'xxx' of undefined at js/p/vue.min.js:6

3、v-if v-else條件渲染

聲明格式

<div v-if="true">
//表達(dá)式為真，顯示
</div>
<div v-else>
//為假，顯示
</div>

v-if , v-else 中間不能有其他元素,以下是不能正確顯示的。

<div v-if="true">
//表達(dá)式為真，顯示
</div>
<div>其他元素，此時(shí)if else結(jié)構(gòu)被打亂 </div>
<div v-else>
//為假，顯示
</div>

4、計(jì)算屬性

當(dāng)需要對(duì)item中數(shù)據(jù)進(jìn)行轉(zhuǎn)化處理，比如日期格式化等其他操作，此時(shí)計(jì)算屬性正好。此時(shí)我的數(shù)據(jù)源是{}對(duì)象。

如果是[]數(shù)組，如果要對(duì)每一個(gè)進(jìn)行處理好像不行，查詢得知計(jì)算屬性不能參數(shù)。所以我是for循環(huán)自己每個(gè)處理一次。

var baseInfo = new Vue({
el:'#base-info-id',
data:{
    item: {
        user:{}
    }
},
computed:{
    user_name:function(){
        var d = this.item;
        var user = d['user'];
        var uname = user["name"] || user['nickName'];
        return uname;
    },
    avatar:function(){
        var d = this.item;
        var u_avatar = d['user']['avatar'] || "default.png";
        return u_avatar;
    },
    postDate:function(){
        var d = this.item;
        var s = d['postDate'];
        var t = dateUtils.format(s);
        return t;
    },
    images:function(){
        //添加圖片  
        var d = this.item;
        var igStr = d['images'];
        if(igStr != null && igStr.length > 0){
            var igurlArr = igStr.split(',');
            // console.log(igurlArr.length);
            return igurlArr;
        }
        return [];
    }
}
});

5、v-cloak

HTML 綁定 Vue實(shí)例，在頁(yè)面加載時(shí)會(huì)閃爍,如下在數(shù)據(jù)未賦值之前會(huì)顯示{{msg}}字符串，非常不好看。

///不加v-cloak
<div id="app">
    {{msg}}
</div>

解決如下：

///加v-cloak 防止頁(yè)面加載完成之前閃爍
<div id="app" v-cloak>
    {{msg}}
</div>

然后在css中添加
[v-cloak] {
  display: none;
}

6、{{s}} 其中s可以是個(gè)表達(dá)式

{{isTrue  ? '正確' : '錯(cuò)誤'}}

這樣簡(jiǎn)單的操作可直接替代v-if v-else,代碼更簡(jiǎn)潔。

持續(xù)更新

Hi 大家好！我是Light413，一名iOS開發(fā)者,寫代碼我是認(rèn)真的，即使看到一個(gè)多余的空格就會(huì)感覺(jué)不爽??。
喜歡前端及后臺(tái)開發(fā)。簡(jiǎn)書就是我的陣營(yíng)，我喜歡在這里學(xué)習(xí)，在這里分享。以后文章會(huì)不斷的更新，介紹關(guān)于iOS開發(fā)學(xué)習(xí)總結(jié) ， 介紹基于MUI 、H5+ 及H5開發(fā)中感悟記錄總結(jié)。感覺(jué)有用就點(diǎn)贊哈，喜歡就大膽的關(guān)注。