uniapp数据绑定

1，uniapp数据绑定。
uni-app数据绑定分两种情况：
①在标签内部绑定使用：{{参数}}
②标签内部绑定使用： 例：:value=‘参数’ 也就是标签内属性绑定参数要多加个：

2，data(){}：存放数据，在data(){}中return，然后去绑定数据。

<template>
	<view class="content">
		<text class="title">{{title}}</text>//Hello
		<input type="text" value="subTitle" />//subTitle
	</view>
</template>

<script>
export default {
    data() {//存放数据
        return {
            title: 'Hello'
        }
    }
}
</script>

3，数组绑定

<template>
    <view class="content">
        <view v-for="(fruit,index) in fruits" :key='index'>
            种类:{{fruit.name}}——颜色{{fruit.color}}
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                fruits: [
                    {
                        name:'苹果',
                        color:'red'
                    },
                    {
                        name:'香蕉',
                        color:'yellow'
                    },
                    {
                        name:'橙子',
                        color:'orange'
                    },
                ]
            }
        }
    }
</script>

效果：

说明：如果要绑定的数据是个数组，这个时候就需要循环绑定，循环使用 v-for，紧接着用到了 :key。key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。
注意：key的取值必须是number 或 string，不能是对象，而且使用 v-for 循环的每一项的值，都要保证唯一性 。

3，条件渲染（v-if；v-hidden）。

<template>
 <view>
  <view v-for="(item, index) in students">
   <view class="persons">{{index}} - {{item.name}}</view>
  </view>
  <view v-if="show">
   true显示！false隐藏！
  </view>
  <view v-hidden="display">
	我在这里哦~
  </view>
 </view>
</template>
<script>
export default {
 data(){
	 return{
		 students : [
		  {name : "张三", age : 18},
		  {name : "李四", age : 20},
		  {name : "王五", age : 28},
		  {name : "赵六", age : 22}
		 ],
	}
//true显示，flase不显示
  show:false;
  display:true
    },
}
</script>

说明：if会根据条件决定是否渲染，hidden 会渲染但根据条件决定是否展示。