uniapp动态显示数组_uni-app学习:4、数据绑定(变量、数组、显示控制)
基本等同與vue,把代碼跑一下,看看就明白了。
其中,
v-hidden?貌似不管是 true or?false?都有顯示
v-show? ? 才切換。
和vue?一樣,數組循環中要加key綁定,只不過如果不加的話會有警告。
{{index}} - {{item.name}}
測試源碼
{{title}}
-------數據綁定展示 基本數據-------
{{name}}
-------數據綁定展示 數組-------
{{index}} - {{item.name}}
這里是條件展示的內容....是否顯示if {{show_if}}
這里是條件展示的內容....是否隱藏 {{show_hidden}}
var _self;
export default {
data() {
return {
title: 'Hello....',
name: 'hcoder',
students: [{
name: "張三",
age: 18
},
{
name: "李四",
age: 20
},
{
name: "王二",
age: 60
}
],
show_if: false,
show_hidden: true,
count: 0,
}
},
onLoad() {
_self = this;
setInterval(function() {
_self.count++;
console.log('第幾次='+_self.count);
if (_self.count > 10) {
_self.show_if = true;
_self.show_hidden=false
}
if (_self.count > 20) {
_self.show_if = false;
_self.show_hidden=true;
_self.count = 0;
}
}, 2000);
},
methods: {
}
}
.content {
text-align: center;
height: 400upx;
}
.logo {
height: 200upx;
width: 200upx;
margin-top: 20upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
h5 {
margin-top: 10px;
}
效果
總結
以上是生活随笔為你收集整理的uniapp动态显示数组_uni-app学习:4、数据绑定(变量、数组、显示控制)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 未定义的引用_Rust 引用和借阅
- 下一篇: 箱线图怎么判断异常值_箱形图(Box-p