前端UI框架——VueAPI使用之流程控制

最新推荐文章于 2024-08-20 15:50:34 发布

Blockchain Explorer

最新推荐文章于 2024-08-20 15:50:34 发布

阅读量1k

点赞数

分类专栏： Web框架/Vue/ 文章标签： vue

本文链接：https://blog.csdn.net/TDCQZD/article/details/82154872

版权

Web框架/Vue/ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、基本介绍

v-if
v-else
v-else-if
v-show
v-for

二、代码示例：

1、v-if
代码案例：

<body>
    <div id="app">
        <p v-if="ok">v-if</p>
        <p v-else>v-else</p>
        <button @click="ok=!ok">click</button>

        <!--<p v-text="!msg"></p>-->
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
           ok:true,
            msg:""
        }
    })

</script>

代码运行测试结果：
这里写图片描述
2、v-show
代码案例：

<body>
    <div id="app">
        <p v-show="ok">show1</p>
        <p v-show="!ok">show2</p>
        <button @click="ok=!ok">click</button>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
           ok:true
        }
    })

</script>

代码运行测试结果：
这里写图片描述
3、v-for
代码案例：

<body>
    <div id="app">
        <div v-for="(item,index) in arr">
            {{index}} ---> {{item.name}} : {{item.age}}
            <button @click="del(index)">删除</button>
            <button @click="updateInfo(index,{name:'wsc',age:50})">添加</button>
        </div>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
           arr:[{name:"damu",age:18},{name:"zdy",age:19},{name:"sym",age:49}]
        },
        methods:{
            del(index){
                this.arr.splice(index,1)
            },
            updateInfo(index,obj){
                //API 坑
                // this.arr[index] = obj;
                //this.arr=[];
                this.arr.splice(index,1,obj)
            }
        }
    })

</script>