【Vue.js】Vue.js开发报错总结
作者:神秘网友
发布时间:2020-09-10 14:35:48
【Vue.js】Vue.js开发报错总结
【Vue.js】Vue.js开发报错总结【报错描述】如下图
【报错原因】入口文件main.js路径配置错误。
【解决方法】如下图
【报错描述】如下图
【报错原因】安装webpack，webpack-cli库，修改Vue配置文件。
【解决方法】如下图
>> npm install webpack --save >> npm install webpack-cli --save
【报错描述】要实现如下图效果：（该界面使用的是Vue.js的ColorUI组件库）
未读的背景颜色为红色，已读的背景颜色为绿色。
但实际实现的是下图效果：
背景颜色不随已读和未读变化。
【报错原因】
背景颜色不随已读和未读变化的代码如下：
<template>
<view style="">
<text stlye="display:inline-block;width: 35px; height: 25px; padding: 2px 8px; color: white; border-radius: 12px; margin-top: 4px; background-color: warnInfo[i-1].isRead?green:red" class="text-grey">
{{ warnInfo[i-1].isRead?'已读':'未读' }}
</text>
<text style="display: inline-block; width: 140px; height: 25px; font-size: 4px; margin-left: 4px; margin-top: 4px;" class="text-grey">{{ warnInfo[i-1].timestamp}}</text>
<text style="display: flex;" class="text-grey">地点:{{ warnInfo[i-1].area }}</text>
<text style="display: flex;" class="text-grey">类型:{{ warnInfo[i-1].type }}</text>
</view>
</template>
<script>
export default {
name: "warnInfo",
data() {
return {
//表单项
warnInfo: [{
isRead: false,
timestamp: "2017-08-12 23:12:12",
area: "xx村",
type: "垃圾已满"
}, {
isRead: true,
timestamp: "2017-08-12 22:01:09",
area: "xx村",
type: "滞留"
}, {
isRead: true,
timestamp: "2017-08-12 22:01:09",
area: "蒙A 0000000",
type: "车辆驶出区域"
}]
}
}
}
</script>
不能实现效果。
【解决方法】换一种方式，用 v-if 实现：
<template>
<view style="">
<text stlye="display:inline-block;" class="text-grey">
<span style="background-color: green;" class="isRead-style" v-if="warnInfo[i-1].isRead==true">已读</span>
<span style="background-color: red;" class="isRead-style" v-if="warnInfo[i-1].isRead==false">未读</span>
</text>
<text style="display: inline-block; width: 140px; height: 25px; font-size: 4px; margin-left: 4px; margin-top: 4px;" class="text-grey">{{ warnInfo[i-1].timestamp}}</text>
<text style="display: flex;" class="text-grey">地点:{{ warnInfo[i-1].area }}</text>
<text style="display: flex;" class="text-grey">类型:{{ warnInfo[i-1].type }}</text>
</view>
</template>
<script>
export default {
name: "warnInfo",
data() {
return {
//表单项
warnInfo: [{
isRead: false,
timestamp: "2017-08-12 23:12:12",
area: "xx村",
type: "垃圾已满"
}, {
isRead: true,
timestamp: "2017-08-12 22:01:09",
area: "xx村",
type: "滞留"
}, {
isRead: true,
timestamp: "2017-08-12 22:01:09",
area: "蒙A 0000000",
type: "车辆驶出区域"
}]
}
}
}
</script>
<style>
.isRead-style {
width: 35px;
height: 25px;
padding: 2px 8px;
color: white;
border-radius: 12px;
margin-top: 4px;
}
</style>
即可实现上述效果。
该写法同样适用于Element-UI：
- 根据table中数据不同改变颜色（正数颜色为红色，负数颜色为绿色）
<el-table-column prop="sharesReturn" label="盈亏(元)">
<template scope="scope">
<span v-if="scope.row.sharesReturn>=0" style="color:red">{{ scope.row.sharesReturn }}</span>
<span v-else style="color: #37B328">{{ scope.row.sharesReturn }}</span>
</template>
</el-table-column>
<el-table-column prop="strategyEarnings" label="盈亏比">
<template scope="scope">
<span v-if="scope.row.strategyEarnings>=0" style="color:red">{{ scope.row.strategyEarnings }}</span>
<span v-else style="color: #37B328">{{ scope.row.strategyEarnings }}</span>
</template>
</el-table-column>
- 根据table中数据不同显示对应的内容（1数字表示买，-1数字表示卖）
实现方式一：
<el-table-column prop="direction" label="买卖方向"> <template slot-scope="scope"> <span v-if="scope.row.direction=== 1">买</span> <span v-if="scope.row.direction=== -1">卖</span> </template> </el-table-column>
实现方式二：
<template>
<el-table-column prop="direction" label="买卖方向" :formatter="statedirection"></el-table-column>
</template>
<script>
// 买卖方向
statedirection(row) {
if (row.direction === 1) {
return "买";
} else if (row.direction === -1) {
return "卖";
}
}
</script>
网址如下：https://www.tianditu.gov.cn/
天地图API网址：http://lbs.tianditu.gov.cn/api/js4.0/guide.html
用vue-cli安装esri-loader：
npm install esri-loader --save
使用Vue CLI和ESRI Loader创建ArcGIS API for JavaScript框架：https://baijiahao.baidu.com/s?id=1671006315135298755&wfr=spider&for=pc
uni-app安装到建立项目开发环境：https://blog.csdn.net/weixin_44770377/article/details/101197498?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-1-101197498.nonecase&utm_term=uniapp%20%E6%80%8E%E6%A0%B7%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96