uni-app 数据展示

• js的data中定义数据
• template中通过{{数据}}来显示数据
• 标签属性上通过:data-index = '数据' 来使用数据 （冒号必须要有）

data() {
    return {
        title: "test";    
    }
}

<view :data-title='title'>{{title}}</view>

Demo

<view class="content">
    <!-- use data {{msg}}-->
    <view>{{msg}}</view>
    <view>{{money}}</view>
    <view>{{isRich}}</view>
    <view>{{person.name}}</view>
    <view>{{person.skill}}</view> // object.attribute
    
    <!-- 数据显示方式2： 通过属性的方式来使用数据-->
    <view :data-color="color" /> # 冒号是必须要有的，否则data-color会被解析成普通字符串
</view>

<script>
    export default {
        // 1. define data
        data() {
            return {
                // store data
                msg: "hello world!",
                money:1000, // Number
                isRich: false, // boolean
                person: { // Object
                    name: "Bill",
                    skill: "coding"
                },
                color: "aqua" // Color
            }
        }
    }
</script>