软工日报23-9-13

发布时间 2023-09-13 21:33:45作者: 天启A

学习时长:2h

解决问题:今天学习了部分VUE知识

代码量:150行

下面是一些控件的实例

<div id="app">
    <p v-if="num>0.5">{{num}}>0.5</p>
    <p v-else>{{num}}<=0.5</p>
    <hr />

    <p v-if="type ==='A'">优秀</p>
    <p v-else-if="type ==='B'">良好</p>
    <p v-else="type ==='C'">合格</p>
    <ul>
        <li v-for="(user,i) in userlist">{{user.name}}</li>
    </ul>
</div>
<script>
    const vm={
        data:function () {
            return{
                num:Math.random(),
                type:'A',
                userlist:[
                    {id:1,name:'Q'},
                    {id:2,name:'W'},
                    {id:3,name:'E'},
                    {id:4,name:'R'},

                ]
            }
        }
    }
    const app=Vue.createApp(vm)
    app.mount('#app')
</script>