14-v-bind和v-for的使用

代码如下：

<template>
    <view>
        <view>
            数据绑定的学习
        </view>
        <view>
            {{msg}}——world！
        </view>
        <view>{{1+1}}</view>
        <view>{{flag ? '我是真的':'我是假的'}}</view>
        <image v-bind:src="imgUrl"></image>
        v-bind可以缩写的
        <image :src='imgUrl'></image>
        <view v-for="(item,index) in arr" :key="item.id">
            序号:{{index+1}},名字：{{item.name}}，年龄：{{item.age}}
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                msg:'hello',
                flag:false,
                imgUrl:'http://destiny001.gitee.io/image/monkey_02.jpg',
                arr:[
                    {
                        name:'宋小宝',
                        age:20,
                        id:1
                    },
                    {
                        name:'刘能',
                        age:21,
                        id:2
                    },
                    {
                        name:'赵四',
                        age:22,
                        id:3
                    },
                    {
                        name:'小沈阳',
                        age:23,
                        id:4
                    },
                ]
            }
        },
        methods: {
        }
    }
</script>
<style>
</style>

v-bind动态绑定属性

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default{
    data(){
    return{
      img:'http://destiny001.gitee.io/image/monkey_02.jpg'
                    }
                }
}

利用v-bind进行渲染
<image v-bind:src="img"></image>
还可以缩写成：
<image :src='img'></image>

v-for的使用

data中定义一个数组，最终将数组渲染到页面上

data(){
return{
    arr:[
            {name:'刘能',age:29},
            {name:'赵四',age:28}    
]
}
}

利用v-for进行循环：
<view v-for="(item,i) in arr" :key='i'>名字：{{item.name}}---年龄:{{item.age}}</view>