欧美国产日韩久久mv,99精品国产成人一区二区,亚洲va欧美va国产综合

首頁 > 博客列表 > Vue中的列表渲染和條件指令渲染實(shí)例

博主信息

博文 27

粉絲 1

評論 2

訪問量 96952

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

最新下載

更多>

網(wǎng)站特效

網(wǎng)站源碼

網(wǎng)站素材

前端模板

Vue中的列表渲染和條件指令渲染實(shí)例

原創(chuàng)

767人瀏覽過

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>1121作業(yè)</title>
<!--  實(shí)例演示列表渲染與條件渲染指令-->
</head>
<body>
<div id="app">
    <h3 :style="{color:red}">列表渲染:v-for</h3>
    <ul>
        <li v-for="(item,key) of list" :key="key">{{item}}</li>
    </ul>
</div>
<hr>
<div id="object">
    <h3 v-bind:style="{color:bl}" >條件渲染:v-if</h3>
    <p v-if="id === 1">{{arr[0]}}</p>
    <p v-else-if="id ===2">{{arr[1]}}</p>
    <p v-else-if="id ===3">{{arr[2]}}</p>
    <p v-else-if="id ===4">{{arr[3]}}</p>
    <p v-else>{{arr[4]}}</p>
</div>
<script>
    // 列表渲染:v-for
    // 應(yīng)用實(shí)例
    const app = Vue.createApp({
        data(){
            return{
                list:[1,2,3,4,5],
                red:'red',
            }
        }
    })
    // 根組件實(shí)例：綁定
    app.mount('#app')
    // 條件渲染:v-if
    const object = Vue.createApp({
        data(){
            return{
                bl:'blue',
                arr:['1==A','2==B','3==C','4==D','非法數(shù)據(jù)！'],
                id:1
            }
        }
    })
    const vm = object.mount("#object")
    // 動(dòng)態(tài)修改
    vm.id = 1       // 1==A
    vm.id = 2       // 2==B
    vm.id = 3       // 3==C
    vm.id = 800   // 非法數(shù)據(jù)！
</script>
</body>
</html>

運(yùn)行結(jié)果

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

JS之DOM相關(guān)操作

2022-07-26 11:10:44

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

運(yùn)行結(jié)果