基础数据绑定
- 变量赋值：
<template>
<view>
{{title}}
</view>
</template>
<script>
export default{
data(){
return{//生命变量
title: ‘关于‘,
age:18
}
}
}
</script>
<style>
</style>
- 变量传递：
<template>
<view>
{{title}}---{{age}}
</view>
</template>
<script>
var _self;
export default{
data(){
return{//生命变量
title: ‘关于‘,
age:18
}
},
onLoad() {
_self=this;//变量传递
setTimeout(function(){
_self.age=20;
},3000);
}
}
</script>
<style>
</style>
-
数组形式的数据绑定：
<template> <!-- 循环遍历数组 --> <view v-for="(item,index) in students"> {{index}}--{{item.name}}:{{item.age}} </view> </template> <script> var _self; export default{ data(){ return{//申明数组 students:[ {name:"张三",age:18}, {name:"李四",age:20} ] } } } </script> <style> </style> - 条件渲染
<template>
<view>
<!-- 循环遍历数组 -->
<view v-if="isShow">
显示了
</view>
</view>
</template>
<script>
var _self;
export default{
data(){
return{//将isShow改成false 就不显示了
isShow: true
}
}
}
</script>
<style>
</style>
-
使用hidden
<template> <view> <!-- 循环遍历数组 --> <view :hidden="isShow"> 摊牌了 </view> </view> </template> <script> var _self; export default{ data(){ return{//将isShow改成false 就不隐藏了 isShow: false } } } </script> <style> </style>
if和hidden的区别
if会根据条件决定是否渲染，hidden会渲染但根据条件决定是否展示