uni-app 之 vue语法

不念不忘少年蓝@ 2023-10-15 15:59 15阅读 0赞

uni-app 之 vue语法

![format_png][]

image.png

\--- v-html 字符 ---

![format_png 1][]

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

![format_png 2][]

image.png

--------------------

循环列表

![format_png 3][]

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>

[format_png]: https://img-blog.csdnimg.cn/img_convert/d4ace41278b8af45c99266cf4838ef25.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/c117739005f3d1f9a42f8675615ccb71.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/ac75f7a4f566c81c6f8ad86d4d9bccdb.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/3e84ee4009bdfda0f1289f9ab840dad8.webp?x-oss-process=image/format,png