uni-app学习--------列表展示,model双向绑定和组件生命周期(第一天)

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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容