uni-app 之 vue语法

uni-app 之 vue语法

image.png

--- v-html 字符 ---

image.png

<template><view><view>{{title}}</view>--- v-html 字符 ---<view>{{title2}}</view><view v-html="title2"></view><view>{{arr}}</view><view>{{arr[2]}}</view><view>{{obj}}</view><view>{{obj.name}}</view></view>
</template><script>export default {data() {return {title:"test測試",title2: "<h1>test測試</h1><em>test測試</em>",arr:["aa","bb","cc"],obj:{name:"張三",age:22}}}}
</script><style>
</style>

---

---

判断 v-if，v-else-if，v-else

image.png

    <view v-if="xiao==1">嘎嘎</view><view v-else-if="xiao==2">嘻嘻</view><view v-else-if="xiao==3">哈哈</view><view v-else>呱呱</view>

---

---

循环列表

image.png

<template><view>--- 循環1 ---<view v-for="item in arr">{{item}}</view>--- 循環2 ---<view v-for="(item,index) in arr"><view>{{(index+1)+"拼接"+item}}</view></view>--- 循環3 ---<view v-for="(value,name,index) in obj"><view>{{index}} - {{name}} - {{value}}</view></view>--- 循環4 不加key在有些平台会异常，這是唯一标识 ---<view v-for="(item) in goods" :key="item.id"><view>商品：{{item.title}} - 價格：{{item.price}}</view></view></view>
</template><script>export default {data() {return {arr: ["aa", "bb", "cc"],obj: {name: "張三",age: 22},xiao: 2,goods: [{id: 11,title: "蘋果",price: 2.5},{id: 12,title: "鴨梨",price: 2},{id: 13,title: "蟠桃",price: 3}]}}}
</script><style>
</style>