vue从循环分支到购物车各种案例_vue for循环id 定义id 提交购物车-CSDN博客

本文链接：https://blog.csdn.net/CharLINHeng/article/details/106893405

Vue条件判断

v-if

当值为true的时候，能够对元素进行显示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue if else </title>
</head>
<body>
    <div id="calc">
        <a v-if="true">看看我能不能显示</a>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果

在这里插入图片描述

当值为false的时候，元素不进行显示

运行结果

在这里插入图片描述
没有显示

控制变量决定是否进行显示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue if else</title>
</head>
<body>
    <div id="calc" v-if="show">
        <ul>
            <li>A</li>
            <li>A</li>
            <li>A</li>
            <li>A</li>
            <li>A</li>
            <li>A</li>
        </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行如下

在这里插入图片描述

v-if和v-else-if的联合使用

现在有个案例，就是给定指定分数，当分数大于90分时，显示优秀，大于80分小于90显示不错，大于60小于80显示良好，60以下显示不及格。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue if else</title>
</head>
<body>
    <div id="calc" v-if="show">
        <a v-if="score >=90">优秀</a>
        <a v-else-if="score >=80">不错</a>
        <a v-else-if="score >=60">良好</a>
        <a v-else-if="score >=0">不及格</a>

    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,score: 110
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果:

在这里插入图片描述

现有一个案例，假设我现在要实现一个登入方式切换，要使用v-if和v-else -if以及v-else来实现。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
        <div style="width: 200px;height: 200px;border-style: solid;border-width: 1px;border-color: rgba(0,0,0,0.09);box-shadow: 0 0 10px 1px rgba(0,0,0,0.3);" v-if="show" :key="login">
            <ul style="list-style: none;font-size: 9px;">
                <li>
                    <label for="name">请输入用户名</label>
                    <input  id="name" type="text" placeholder="请输入用户名"  :key="login">
                </li>
                <li>
                    <label for="pass">请输入密码</label>
                    <input  id="pass" type="text" placeholder="请输入密码">
                </li>
            </ul>
        </div>
        <div style="width: 200px;height: 200px;border-style: solid;border-width: 1px;border-color: rgba(0,0,0,0.09);box-shadow: 0 0 10px 1px rgba(0,0,0,0.3);" v-else >
            <ul style="list-style: none;font-size: 9px;">
                <li>
                    <label for="email">请输入邮箱</label>
                    <input  id="email" type="text" placeholder="请输入邮箱" key="login">
                </li>
                <li>
                    <label for="pass">请输入密码</label>
                    <input  id="pass" type="text" placeholder="请输入密码">
                </li>
            </ul>
        </div>
        <button style="justify-content: center;display:flex;margin: 0 auto;" @click="show = !show">切换登入方式</button>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
        }
    })

</script>

运行结果如下:

在这里插入图片描述

key在这里是指定元素不复用。添加:key可以不复用。什么是复用？不复用的话，当切换登入方式的时候，原来输入的内容还继续保留。

v-show

v-show跟v-if的不同区别是，当v-show的值为false的时候，页面还是有使用v-show的这个元素，只是将其style的display设置为none了。使用代码来看下结果:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
        <div style="width: 200px;height: 200px;border-style: solid;border-width: 1px;border-color: rgba(0,0,0,0.09);box-shadow: 0 0 10px 1px rgba(0,0,0,0.3);" v-if="show" key="login">
           <a id = "v-if" v-if="show">我是v-if</a>
           <a id = "v-show" v-show = "show">我是v-show</a>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果:

从运行可知，v-if是将元素才dom中删除，v-show是将css属性设置为display:none;

当某个元素使用频率为很高时，推荐使用v-show
当某个元素使用频率为很低或者使用一次时，推荐使用v-if

v-for循环遍历

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
            <ul>
                <li v-for="(item,index) in items">
                    {{item}}
                </li>
            </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,items:['CharlinHeng','AppleStone','BabyComs','AnnotationKey','AwareAbstract','DispatchServlet']
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果如下:

在这里插入图片描述

v-for遍历对象

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
            <ul>
                <li v-for="item in items">
                    {{item}}
                </li>
            </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,items:{
                name: "CharlinHeng"
                ,age: 500
                ,moneySave: 0
            }
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行如下:

在这里插入图片描述

可以看到，输出的数据只包含了value。

下面来获取key和value代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
            <ul>
                <li v-for="(value,key) in items">
                    {{key}}  {{value}}
                </li>
            </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,items:{
                name: "CharlinHeng"
                ,age: 500
                ,moneySave: 0
            }
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果:

在这里插入图片描述

同时获取索引，key和value。代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
            <ul>
                <li v-for="(value,key,index) in items">
                   {{index}} ： {{key}}  {{value}}
                </li>
            </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,items:{
                name: "CharlinHeng"
                ,age: 500
                ,moneySave: 0
            }
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行结果如下:

在这里插入图片描述

在数组元素之间插入一个元素:

代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
            <ul>
                <li v-for="(item,index) in items">
                    {{item}}
                </li>
            </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,items:['CharlinHeng','AppleStone','BabyComs','AnnotationKey','AwareAbstract','DispatchServlet']
        }
        ,methods:{
        }
        ,computed: {
        }
    })

</script>

运行流程

在这里插入图片描述

使用object.slice(a,b,c) ,其中a是从哪开始(索引)，b是删除多少个，如果为0，那么不删除。c是要增加的字符串。

案例：点击按钮，增加数组指定的元素

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
            <ul>
                <li v-for="(item,index) in items">
                    {{item}}
                </li>
            </ul>
            <ul>
                <li>
                    <input type="text" v-model="value"> 
                    <button @click="add">点击添加指定的元素</button>
                </li>
            </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,items:['CharlinHeng','AppleStone','BabyComs','AnnotationKey','AwareAbstract','DispatchServlet']
            ,value:""
        }
        ,methods:{
            add:function(){
                this.items.push(this.value)
            }
        }
        ,computed: {
        }

    })

</script>

运行效果如下:

使用Vue.set方法来动态更新array的值(效果跟splice一样):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<body>
    <div id="calc">
            <ul>
                <li v-for="(item,index) in items">
                    {{item}}
                </li>
            </ul>
            <ul>
                <li>
                    <input type="text" v-model="value"> 
                    <button @click="add">点击添加指定的元素</button>
                </li>
            </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,items:['CharlinHeng','AppleStone','BabyComs','AnnotationKey','AwareAbstract','DispatchServlet']
            ,value:""
        }
        ,methods:{
            add:function(){
                this.items.push(this.value)
            }
        }
        ,computed: {
        }

    })
    Vue.set(app.items,0,"CCCCCCCCC")
</script>

运行效果:

数组中有些方法是响应式的，比如:

名称	描述	类型
push	压入新元素	响应式
pop	弹出最后一个元素	响应式
shift	删除数组的第一个元素	响应式
unshift	在数组最前面添加元素	响应式
splice	既可以删除多个，删除一个，还可以在指定位置添加元素,替换都可以{}	响应式
sort	排序	响应式
reverse	反转	响应式

顺便一提:可变参数写法

funciton c(...num){
	//打印的是长度为10的数组
	console.log(num);
}
//往函数传参
c(1,2,3,4,5,6,7,8,9,10)

实际案例：

通过使用v-for和:class来实现，动态添加数组列表，点击哪个，哪个数组元素变色，其余则保持不变色

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<style>
    .change{
        color:red;
    }
</style>
<body>
    <div id="calc">
            <ul>
                <li v-for="(item,index) in items" :class="{change: currIndex === index}" @click="changeCurrIndex(index)">
                    {{item}}
                </li>
            </ul>
            <ul>
                <li>
                    <input type="text" v-model="value"> 
                    <button @click="add">点击添加指定的元素</button>
                </li>
            </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            show: true
            ,items: ['CharlinHeng','AppleStone','BabyComs','AnnotationKey','AwareAbstract','DispatchServlet']
            ,value: ""
            ,currIndex: -1
        }
        ,methods:{
            add:function(){
                this.items.push(this.value)
            }
            ,changeCurrIndex:function(index){
                this.currIndex = index;
            }
        }
        ,computed: {
        }

    })
</script>

运行结果:

在这里插入图片描述

综合案例：做出购物车，可以对商品进行增减，可以移除商品。当所有商品为空的时候，显示购物车为空。
本人写的代码如下参考:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue条件判断</title>
</head>
<style>
    .change{
        color:red;
    }
    .tab{
        border-style: solid;border-width: 1px;border-color: rgba(0,0,0,0.09);
        position: relative;
        left: 200px;
        box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
      margin: 0;
        
    }
    .tab tr{
        font-size: 12px;
        
    }
    .tab td{
        margin: 0 auto;
        text-align: center;
    }
    .tab thead{
        border-style: solid;border-width: 1px;border-color: rgba(0,0,0,0.09);
    }
    .tab th{
        border-style: solid;border-width: 1px;border-color: rgba(0,0,0,0.09);
        padding: 0 28px 0 28px;
    }
</style>
<body>
    <div id="calc">
            <table class="tab" cellspacing="0" cellpadding="0" >
                <thead>
                    <th>
                        商品编号
                    </th>
                    <th>
                        书本名称
                    </th>
                    <th>
                        出版日期
                    </th>
                    <th>
                        价格
                    </th>
                    <th>
                        购买数量
                    </th>
                    <th>
                        操作
                    </th>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in list">
                        <td >
                            {{index+1}}
                        </td>
                        <td v-for="(values,key,index_) in item" v-if="index_ != 3">
                            {{values}}
                        </td>
                        <td v-for="(values,key,index_) in item" v-if="index_ === 3">
                            <button @click="sub(index,values)" :key="index_">-</button>
                            {{values}}
                            <button @click="add(index)">+</button>
                        </td>
                        <td>
                            <button @click="remove(index)">移除</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="10" style="text-align: left;position: relative;left: 20px;">
                            <a >总价:${{total}}</a>

                        </td>
                    </tr>
                </tbody>
            </table>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#calc'
        ,data: {
            listen: ""
            ,list:[
                {name: 'android第一行代码', date: '2008-12-01',price: 38.3 , num: 3}
                ,{name: '计算机组成原理', date: '2003-01-22',price: 68 , num: 10}
                ,{name: '程序员素质', date: '2015-06-22',price: 10.9 , num: 2}
                ,{name: 'java从入门到秃头', date: '2020-01-11',price: 440, num: 22}
            ]
        }
        ,methods:{
            add(body){
                this.list[body].num++;
            }
            ,sub(body,value){
                if(value > 0){
                    this.list[body].num--;
                }else{
                    //移除
                    this.list.splice(body,1);
                }
            }
            ,remove(body){
                //移除
                this.list.splice(body,1);
            }
        }
        ,computed: {
            total(){
                let all = 0;
                for(let i = 0;i<this.list.length;i++){
                    all += this.list[i].price*this.list[i].num;
                }
                return all;
            }
        }
        ,watch: {
            listen(){
                total();    
            }
        }

    })
</script>