-
v-show指令的值可以是布尔值、属性名、函数名,如果使用函数来控制,无论函数内容是什么,只要最终返回的是布尔类型的true和false即可。
-
表单元素的value属性的绑定值最好不要是父元素传递的值,即props里的属性。
原因:避免直接更改prop,prop是单向绑定,不能更改数据,只能由父组件传输过来。每当父组件重新渲染时,该值会被重新覆盖,所以对value属性的值应该使用data或计算属性定义数据,再通过$emit等方法将值传递给父组件。 -
路由缓存问题:通过watch监听路由变化解决问题
-
封面图比例
padding-bottom的值是百分比的话是 基于父元素宽度的百分比下内边距
<div class="coverImg">
<div class="cover-img">
<img src="" :alt="alt" />
</div>
<!-- 控制封面图高度 -->
<div class="holder"></div>
</div>
/*封面图占比*/
.coverImg {
position: relative;
}
.cover-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
background-position: 50%;
background-size: cover;
}
.cover-img img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.holder {
width: 100%;
position: relative;
padding-bottom: 100%;
background-repeat: no-repeat;
background-size: cover;
}
- 对列表内容进行筛选,可以在computed定义
data(){
return {
list:[
{id:1,name:"zs"},
{id:2,name:"ls"},
{id:3,name:"zss"},
{id:4,name:"zsl"},
]
}
}
computed:{
// 第一种
getFirstThreeList(){
return this.list.filter((item,index) => index < 3)
},
// 第二种
getFirstThreeList(){
return this.list.slice(0,3)
}
}
-
在vue项目中使用$router.push()报错的解决方案:
(可以点击这里蓝色字查看这篇文章的详细介绍~)
解决vue在控制台的 NavigationDuplicated 报错 -
js判断对象是否为空对象obj的几种方法
var obj = {}
// 1、将json对象转化为json字符串
JSON.stringiy(obj) === '{}'
// 2、keys()返回数组
Object.keys(obj).length === 0
// 3、for循环
let flag = () => {
for(var key in obj) {
return false;
}
return true;
}
console.log(flag) // 输出true即代表obj为空
// 4、getOwnPropertyNames()返回数组
Object.getOwnPropertyNames(obj).length === 0
- vuex-router-sync
通过安装该插件可以将vue-router当前的$route同步为vuex存储状态的一部分。即可以通过store.state.route获取路由信息
//安装:
npm i vuex-router-sync --save
// 在 main.js 导入
import { sync } from "vuex-router-sync";
// 使用
sync(store, router)
// 可以选择设置自定义vuex模块名称
sync(store, router, { moduleName: 'RouteModule' } )
// 举例:在store.js里
mutations:{
getRouteSrc(state) {
const path = state.route.from.path;
},
}
- 【vue移动端页面】设计一个带返回按钮的头部导航,如果是首页,则没有返回按钮
// 头部导航 template部分
<div class="navigation flex flex-center flex-middle">
<img v-if="isReturn" class="iconBack" src="@/assets/images/icon/icon-menu-back.png" alt="返回图标" @click="goBack()" />
<div class="header">{{ currentTitle }}</div>
</div>
<div class="placeholder" ></div>
// 导航栏 style部分
.navigation{
position: fixed;
top: 0;
width: 100%;
height: 2.2rem;
line-height: 2.2rem;
z-index: 1000;
background-color: #fff;
border-bottom: 1px solid #eee;
.iconBack{
position: absolute;
left: 0.75rem;
width: 1rem;
height: 1rem;
}
.header{
font-size: 0.75rem;
font-weight: bold;
}
}
.placeholder{
width: 100%;
height: 2.2rem;
}
// script部分
data(){
return {
currentPath :"",
isReturn: false, // 是否显示返回按钮
}
}
methods:{
goBack: function() {
this.$router.go(-1);
},
}
mounted(){
this.currentPath = this.$route.path;
if (new RegExp(/^\/home/).test(this.currentPath)) {
this.isReturn = false;
} else {
this.isReturn = true;
}
},
watch:{
$route(to,from){
this.currentPath = to.path;
if (new RegExp(/^\/home/).test(this.currentPath)) {
this.isReturn = false;
} else {
this.isReturn = true;
}
}
}