1.基础写法为<view class="" v-for="item in listValue" >{{item}}</view>
如果需要index则写成 <view class="" v-for="(item,index) in listValue" :key="index"> </view>
如果不需要则可以讲index去掉简写为<view class="" v-for="item in listValue" >{{item}}</view>
2.其中item和index这个是可以变的,这个只是一个引用的变量。
可以根据 你喜欢的方式来命名
比如可以这么写:
<view class="" v-for="(value1,index1) in listValue" :key="index1">
{{value1}}-------{{index1}}
</view>
3.model绑定是双向的。例:将input 的值输出给inputText。然后改变inputText,也会改变input 的显示值。
因为inputText和input已经绑定
4.关于list数组的介绍:https://github.com/youngwind/blog/issues/85
组件生命周期可以了解了解。
beforeCreate :在实例初始化之后被调用
created:在实例创建完成后被立即调用。
beforeMount:在挂载开始之前被调用。
mounted:挂载到实例上去之后调用。
beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
beforeUpdate:实例销毁之前调用。在这一步,实例仍然完全可用。
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
例子。点击button将input数据添加进列表中,添加完毕后,将input清空
<template>
<view>
<input v-model="inputText"></input>
<button @click="click1()">按钮</button>
<view class="" v-for="(item,index) in listValue" :key="index">
{{item}}-------{{index}}
</view>
</view>
</template>
<script>
export default{
data(){
return{
listValue:["hello","word","1" ,"2",3]
inputText:' '
}
},
methods:{
click1:function(){
this.listValue.push(this.inputText)
this.inputText = ' '
}
}
}
</script>
<style>
</style>