一、数组中出现__ob__: Observer无法取值
问题:
原因:
只是因为你太着急了!!!!
vue取值的方式是Ajax异步的,换句人话就是说,你还没有从数据库中取到值放到对应的数组中去你那边就开始取值,那肯定是取不到的,所以设一个延迟等去取完之后呢你在进行赋值即可!那么你就可以看到这个值了。
注意:若使用JSON.parse(JSON.stringify(数组)),得到依然是空数组。原因如上。
解决办法:设置延迟
setTimeout(()=>{
//这里就写你要执行的语句即可,先让数据库的数据加载进去数组中你在从数组中取值就好了
this.city=this.cityList[0].name
},800)
二、页面传参和接受参数
1.字符串
传递参数:
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
接收参数:
// 在test.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
2.对象或数组
传递参数:
//通过提供的JSON.stingify方法,将对象转换成字符串后传递
click:function(e){
var model = JSON.stringify(e.currentTarget.dataset.model);
wx.navigateTo({
url: '../detail/detail?model=' + model,
})
}
接收参数:
//接收
onLoad: function (options) {
//将字符串转换成对象
var bean = JSON.parse(options.model);
},
三、绑定样式:动态style / :style=“{css属性: 值}“
语法 :style="{css属性: 值}"
注意:
- 凡是有 - 的style属性名都要变成驼峰式,比如font-size要变成
fontSize。
- 除了绑定值,其他的属性名的值要用引号括起来,比如
fontSize:'14px'
而不是fontSize
:14px。- 属性间用逗号分开
- 加{}
<div :style="{ color: '#333', fontSize: '14px' }"></div>
<div style="color:#333;font-size: 14px"></div>
文章推荐:
<template>
<div>
<!-- :style="css属性:值" -->
<button @click="one">点击变色01</button>
<button @click="two">点击变色02</button>
<button @click="three">点击变色03</button>
<div :style="{backgroundColor : bl}">盒子</div>
</div>
</template>
<script>
export default {
data () {
return {
bl:'red'
}
},
methods: {
one(){
this.bl = 'blue'
},
two(){
this.bl = 'gold'
},
three(){
this.bl = 'orange'
}
}
}
</script>
<style>
</style>