Vue使用问题记录

vue_logo.png

Vue使用中遇到的问题总结记录。内容比较基础，无奈我是菜鸟

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

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

content字符串很长，内部的换行符\n不起作用。

由于Vue将其插值渲染成div内部文本后，文本并不换行，换行符显示为一个空格。解决：

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

其中div不能换行，如果换行后首行缩进的距离很大。其实设置为pre即可使换行符发挥作用，但这时文本在div宽度不足时不会自动换行，而是撞破边界延伸到div外部去，所以还得加上wrap。

2、Vue数据对象嵌套对象时的实例声明

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

item中包含其他对象必须先声明如下：

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

否则会报错

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

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

声明格式

<div v-if="true">
//表达式为真，显示
</div>
<div v-else>
//为假，显示
</div>

v-if , v-else 中间不能有其他元素,以下是不能正确显示的。

<div v-if="true">
//表达式为真，显示
</div>
<div>其他元素，此时if else结构被打乱 </div>
<div v-else>
//为假，显示
</div>

4、计算属性

当需要对item中数据进行转化处理，比如日期格式化等其他操作，此时计算属性正好。此时我的数据源是{}对象。

如果是[]数组，如果要对每一个进行处理好像不行，查询得知计算属性不能参数。所以我是for循环自己每个处理一次。

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实例，在页面加载时会闪烁,如下在数据未赋值之前会显示{{msg}}字符串，非常不好看。

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

解决如下：

///加v-cloak 防止页面加载完成之前闪烁
<div id="app" v-cloak>
    {{msg}}
</div>

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

6、`{{s}}` 其中s可以是个表达式

{{isTrue  ? '正确' : '错误'}}

这样简单的操作可直接替代v-if v-else,代码更简洁。

持续更新

Hi 大家好！我是Light413，一名iOS开发者,写代码我是认真的，即使看到一个多余的空格就会感觉不爽😆。
喜欢前端及后台开发。简书就是我的阵营，我喜欢在这里学习，在这里分享。以后文章会不断的更新，介绍关于iOS开发学习总结，介绍基于MUI 、H5+ 及H5开发中感悟记录总结。感觉有用就点赞哈，喜欢就大胆的关注。

最后编辑于：2019.01.04 22:13:57