Vue基础案例

圈圈的马甲
265 阅读3分钟

1.新浪tab栏案例

image-20211010204205834.png

css代码:

*{margin: 0;padding: 0;list-style: none;}
a{
    text-decoration: none;
    color: #122e67;
    font-size: 12px;
}
#app{
    width: 360px;
    height: 277px;
    margin: 100px auto;
}
.box1{
    width: 360px;
    height: 36px;
    background-color: rgb(248, 248, 248);
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
}
.tab{
    width: 60px;
    height: 36px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    cursor: pointer;
}
.tab.current{
    border-top: 3px solid #ff8400;
    background-color: #fff;
}
.picAll{
    /* display: none; */
    margin-top: 15px;
    width: 360px;
    height: 200px;
}
.pic{
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pic1{
    width: 105px;
    height: 70px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}
.pic1>img{
    width: 105px;
}
.pic1>span{
    position: absolute;
    width: 105px;
    height: 20px;
    bottom: -20px;
    left: 0;
    color: #fff;
    background-color: #000;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pic1:hover>span{
    color: #ff8400;
}
.txt{
    margin-top: 30px;
    width: 360px;
    height: 110px;
}
.txt1{
    padding-left: 10px;
    line-height: 26px;
    height: 26px;
    background: url(./image/icon.png) no-repeat 0 -881px;
}
.txt1>a:hover{
    color: #ff8400;
    text-decoration: underline;
}
.bgc{
    background: url(./image/photoNewsLeft2.gif) no-repeat 0 center;
    padding-left: 23px;
}
.spbgc{
    background: url(./image/videoNewsLeft.gif) no-repeat 0 center;
    padding-left: 23px;
}
.column{
    /* display: none; */
    margin-top: 15px;
    width: 360px;
    height: 200px;
}
.hot{
    /* display: none; */
    margin-top: 15px;
    width: 360px;
    height: 200px;

html代码部分

<div id="app">
    <div class="box1">
        <div class="tab" @mouseover='changes(1)'>图片</div>
        <div class="tab" @mouseover='changes(2)'>专栏</div>
        <div class="tab" @mouseover='changes(3)'>热点</div>
    </div>
    <div class="picAll" v-show='num==1'>
        <ul class="pic">
            <li class="pic1">
                <img src="./image/图片1.jpg" alt="">
                <span>台风"狮子山"登录</span>
            </li>
            <li class="pic1">
                <img src="./image/图片2.jpg" alt="">
                <span>敦煌引客30万人次</span>
            </li>
            <li class="pic1">
                <img src="./image/图片3.jpg" alt="">
                <span>访谈中国杂技之乡</span>
            </li>
        </ul>
        <ul class="txt">
            <li class="txt1"><a class="bgc" href="#">香港三号强风信号持续 路面积水市民冒雨出行</a></li>
            <li class="txt1"><a class="bgc" href="#">寒露鸟瞰吉林红叶 千里枫林秋韵浓</a></li>
            <li class="txt1"><a class="bgc" href="#">贵州：旅游公路建起来 深山苗寨富起来</a></li>
            <li class="txt1"><a class="bgc" href="#">马龙尽显沉稳内敛热爱</a> <a href="#">张柏芝时尚气息扑面而来</a> </li>
        </ul>
    </div>
    <div class="column" v-show='num==2'>
        <ul class="pic">
            <li class="pic1">
                <img src="./image/专栏1.jpg" alt="">
                <span>青岛网红打卡地</span>
            </li>
            <li class="pic1">
                <img src="./image/图片2.jpg" alt="">
                <span>梦幻粉黛乱子草</span>
            </li>
            <li class="pic1">
                <img src="./image/图片3.jpg" alt="">
                <span>超绝的土豆沙拉</span>
            </li>
        </ul>
        <ul class="txt">
            <li class="txt1"><a href="#">《长津湖》成纪录“收割机”</a> <a href="#">她值得红了30多年</a></li>
            <li class="txt1"><a href="#">恐韩症？中国女足说不!</a> <a href="#"> 铿锵玫瑰在战斗中学会战斗</a></li>
            <li class="txt1"><a href="#">中国城市财力大比拼</a> <a href="#">优爱腾走了几年弯路</a></li>
            <li class="txt1"><a href="#">4个超火发型剪完颜值飞升</a> <a href="#">武书连2021中国大学综合实力排行榜</a> </li>
        </ul>
    </div>
    <div class="hot" v-show='num==3'>
        <ul class="pic">
            <li class="pic1">
                <img src="./image/热点1.jpg" alt="">
                <span>新疆"赛里木湖蓝"</span>
            </li>
            <li class="pic1">
                <img src="./image/热点2.jpg" alt="">
                <span>快船不敌独行侠</span>
            </li>
            <li class="pic1">
                <img src="./image/热点3.jpg" alt="">
                <span>尚雯婕新歌筹备中</span>
            </li>
        </ul>
        <ul class="txt">
            <li class="txt1"><a href="#">年轻人的婚礼自由：不办婚礼 怎么能把份子钱收回来？</a></li>
            <li class="txt1"><a class="bgc" href="#">贵州：旅游公路建起来 深山苗寨富起来</a></li>
            <li class="txt1"><a href="#">水庆霞不参加女足主帅选聘</a> <a href="#"> 湖人遭NBA季前赛三连败</a></li>
            <li class="txt1"><a class="spbgc" href="#">郭晶晶带儿女参加慈善活动</a> <a class="spbgc" href="#">周杰伦晒昆凌背影照</a> </li>
        </ul>
    </div>
</div>

js代码部分

new Vue({
    el: "#app",
    data: {
        num:1
    },
    methods:{
        changes(number){
            this.num = number
            let btn=document.querySelectorAll('.tab')
            
            //原生js操作
            btn.forEach(el=>{el.classList.remove('current')})
            btn[number-1].classList.add('current')
       
        }
    }
})

1.1优化

image-20211010205034397.png

css部分

 *{margin: 0;padding: 0;border: 0;list-style: none;}
 #app{border: 1px solid #000;width: 500px;margin: 100px auto;}
 ul{background: #efefef;width: 500px;overflow: hidden;}
 li{float: left;position: relative;height: 40px;line-height: 40px;padding: 0 10px;cursor: pointer;}
 li.active{background: #fff;}
 li span{height: 6px;width: 100%;position: absolute;left: 0;top: 0;background: transparent;}
 li.active span{background: orange;}

html部分

<div id="app">
    <ul>
        <li v-for="(item, index) in arr" @mouseenter="num=index" :key="index" :class="{'active': num==index}">{{item}} <span></span></li>
    </ul>
</div>

js部分

new Vue({
    el: "#app",
    data: {
        arr: ["图片", "专栏", "热点"],
        num: 0
    }
})

2.选项卡案例

image-20211010205118698.png

点击按钮,切换

<div id="app">
    <button @click='btnClick(1)'>盒子1</button>
    <button @click='btnClick(2)'>盒子2</button>
    <button @click='btnClick(3)'>盒子3</button>
    <hr>
    <div class="box" v-show='num==1'>盒子1</div>
    <div class="box" v-show='num==2'>盒子2</div>
    <div class="box" v-show='num==3'>盒子3</div>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        num:1
    },
    methods:{
        btnClick(number){
            this.num = number
        }
    }
})
</script>

2.1优化

<div id="app">
    <button @click='num=1'>盒子1</button>
    <button @click='num=2'>盒子2</button>
    <button @click='num=3'>盒子3</button>
    <hr>
    <div class="box" v-show='num==1'>盒子1</div>
    <div class="box" v-show='num==2'>盒子2</div>
    <div class="box" v-show='num==3'>盒子3</div>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        num:1
    }
})
</script>

3.下拉选择框

image-20211010205431349.png

<div id="app">
    <select  v-model="result">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橘子</option>
        <option value="mango">芒果</option>
    </select>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        result:"banana"
    }
})
</script>

4.图书管理

image-20211010205533702.png

实现购买数量的增加、减少，移除，总价格

css部分

 table {
     border: 1px solid #eee;
     border-collapse: collapse;
 }
 td,
 th {
     padding: 8px 10px;
     border: 1px solid #eee;
     text-align: left;
 }
 th {
     background-color: #eeeeef;
 }
 #app {
     width: 540px;
     margin: 0 auto;
 }

html部分

<div id="app">
    <table>
        <thead>
            <tr>
                <th v-for="(item,index) in titles" :key="index">{{item}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in books">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{item.price | filterMoney}}</td>
                <td>
                    <button @click="sub(index)">-</button>
                    <!-- <button @click="item.num--">-</button> -->
                    <span>{{item.num}}</span>
                    <button @click="add(index)">+</button>
                    <!-- <button @click="item.num++">+</button> -->
                </td>
                <td>
                    <button @click="removeThis(index)">移除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <p>总价格:{{totalPrice | filterMoney}}</p>
</div>

js部分

new Vue({
    el: "#app",
    data: {
        titles: ['编号', '书籍名称', '出版日期', '价格', '购买数量', '操作'],
        books: [
    },
    filters: {
        filterMoney(val) {
            return "￥" + val.toFixed(2)
        }
    },
    methods: {
        //减法
        sub(index) {
            if (this.books[index].num > 0) {
                this.books[index].num--
            }
        },
        // 加法
        add(index) {
            this.books[index].num++
        },
        //移除
        removeThis(index){
            this.books.splice(index,1)
        }
    },
    computed: {
        //计算总价
        totalPrice() {
            //方法一:
             /* let sum=0;
             this.books.forEach(item=>{
                 sum+=item.price * item.num
             })
             return sum */
            //方法二
            return this.books.reduce((sum, current) => {
                sum += current.price * current.num;
                return sum
            },0)
        }
    }
})
avatar
文章
阅读
粉丝