天天看點

uni-app 資料展示

  • js的data中定義資料
  • template中通過{{資料}}來顯示資料
  • 标簽屬性上通過:data-index = '資料' 來使用資料 (冒号必須要有)
data() {
    return {
        title: "test";    
    }
}

<view :data-title='title'>{{title}}</view>      
<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>