10 uniapp 数据绑定

基本的数据绑定： 
<template>
    <view class="content">
        <view>数据绑定基础知识</view>
        <!-- 字符串 -->
        <view><text>{{msg}}</text></view>
        <view><text>{{12+"12"}}</text></view>
        <!-- 数值 -->
        <view><text>{{1+1}}</text></view>
        <view>{{num}}</view>
        <!-- 布尔值 -->
        <view><text>{{flag?"真的":"假的"}}</text></view>        
        <view><text>{{11%2===0?"偶数":"奇数"}}</text></view>        
        <!-- 对象 -->
        <view>姓名:{{person.name}}，工作：{{person.job}}</view>
        <!-- 数组  v-for-->
        <view v-for="(item,index) in  list" :key="item.id">
            <view>id:{{item.id}},名字：{{item.name}}</view>
        </view>
        <!-- v-bind 可以简写为： -->
        <image :src="imgUrl"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                msg:"好事要来到",
                num:20,
                flag:false,
                person:{
                    name:"牛牛",
                    job:"导游"
                },
                list:[
                    {id:1,name:"窝窝"},
                    {id:2,name:"年年"}
                ],
                imgUrl:"https://img0.baidu.com/it/u=964231911,1680605089&fm=26&fmt=auto"
            }
        },
    }
</script>

 v-for：循环                           v-bind：数据绑定，简写为：             v-on：绑定事件，简写为@

<template>
    <view class="content">
        <!--  v-for 循环数据-->
        <view v-for="(item,index) in  list" :key="item.id">
            <view>序号:{{index}},名字：{{item.name}}，年龄：{{item.age}}</view>
        </view>
        <!-- v-bind 可以简写为： -->
        <image :src="imgUrl"></image>
        <!-- v-on 绑定事件，可以简写为 @ -->
        <button type="warn" size="mini" @click="warnHandle">触发警告，不传参</button>        
        <button type="primary" size="mini" @click="emitHandle(20)">传参</button>        
        <button type="primary" size="mini" @click="evtHandle(20,$event)">传参,并获取事件对象</button>        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list:[
                    {id:1,name:"窝窝",age:"5岁"},
                    {id:2,name:"年年",age:"7岁"}
                ],
                imgUrl:"https://img0.baidu.com/it/u=964231911,1680605089&fm=26&fmt=auto"
            }
        },
        methods:{
            warnHandle(){
                console.log("触发了警告！") //触发了警告！
            },
            emitHandle(v){
                console.log(v); //20 
            },
            evtHandle(v,e){
                console.log(v,e); //20 {mp: {…}, type: "tap", timeStamp: 7460, x: 186, y: 340, …}
            }            
        }
    }
</script>