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>