v-model双向绑定、v-for遍历

v-model

数据双向绑定（绑定的是表单控件）

<input type="text" v-model:value="value">
<!-- 简写 -->
<input type="text" v-model="value">

双向绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

v-for 遍历数组

<li v-for="(item,index) in list" :key="index">
                {{index}}==={{item}}
</li>
<!-- item数组中每一项，index索引
	key:
     key只能是字符串或者数字
     key必须是唯一
     key作用：提高重排效率，就地复用
             -->

v-for 遍历对象

 <div v-for="(value,key,index) in obj" :key="index">
            {{value}}=={{key}}=={{index}}
 </div>
 <!-- value值，key键 ，index索引 -->

v-for遍历数字

<div v-for="num in 10"> 
            <div>标题</div>
            <div>免费</div>
</div>