Vue实例

最新推荐文章于 2024-05-20 17:14:34 发布

duansamve

最新推荐文章于 2024-05-20 17:14:34 发布

阅读量112

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/duansamve/article/details/88701502

版权

vue 专栏收录该内容

106 篇文章 6 订阅

订阅专栏

一、购物车：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div id="app">
    <template v-if="list.length">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list">
                    <td>{{index + 1}}</td>
                    <td>{{item.name}}</td>
                    <td>￥{{item.price}}</td>
                    <td><button @click="handReduce(index)" :disabled="item.count === 1">-</button>{{item.count}}<button @click="handleAdd(index)">+</button></td>
                    <td><button @click="handRemove(index)">移除</button></td>
                </tr>
            </tbody>
        </table>
        <div>总价：￥{{totalPrice}}</div>
    </template>
    <div v-else>购物车为空</div>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script>
let vm = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: 'iPhone 7',
                price: 6188,
                count: 1
            },
            {
                id: 2,
                name: 'iPad pro',
                price: 5888,
                count: 1
            },
            {
                id: 3,
                name: 'MacBook pro',
                price: 21488,
                count: 1
            }
        ]
    },
    methods: {
        handReduce: function(index){
            if(this.list[index].count ===1){
                return;
            }
            this.list[index].count--;
        },
        handleAdd: function(index){
            this.list[index].count++;
        },
        handRemove: function(index){
            this.list.splice(index, 1);
        }
    },
    computed: {
        totalPrice: function(){
            var totalPrice = 0;
            for(var i = 0; i<this.list.length; i++){
                totalPrice += this.list[i].price * this.list[i].count;
            }
            return totalPrice;
        }
    }
})

</script>
</body>
</html>

二、数量加减：

<div id="app">
    <p>总数：{{counter}}</p>
    <my-component @reduce="handGetTotal" @increase="handGetTotal"></my-component>
</div>

Vue.component("my-component", {
    template: `
        <div>
            <button @click="handleReduce">-1</button>
            <button @click="handleIncrease">+1</button>
        </div>
    `,
    data: function(){
        return {
            counter: 0
        }
    },
    methods: {
        handleReduce: function(){
            if(this.counter === 0){
                return;
            }
            this.counter--;
            this.$emit('reduce', this.counter);
        },
        handleIncrease: function(){
            this.counter++;
            this.$emit('increase', this.counter);
        }
    }
});

let vm = new Vue({
    el: '#app',
    data: {
        counter: 0
    },
    methods: {
        handGetTotal: function(total){
            this.counter = total;
        }
    }
});

三、Vue下拉列表实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div id="app">
    <custom-select btn-value="查询" :list="list1"></custom-select>
    <custom-select btn-value="搜索" :list="list2"> </custom-select>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script>
    // 父组件
    Vue.component("custom-select", {
        /*
           !此处数据类型必须是一个函数形式，不能直接写对象。
            每个组件都是相互独立的，如果它们共用一个对象，在更改一个组件数据的时候，会影响到其它
            组件，如果是函数的话，每个组件就都有自己的独立数据，相互之间不会影响。
        */
        data: function() {
            return {
                selectShow: false,
                val: ""
            };
        },
        props: ["btnValue", "list"],
        template: `<section class="wrap">
                    <section class="searchIpt clearFix">
                        <section class="clearFix">
                            <input type="text" class="keyWord" :value="val"  @click="selectShow=!selectShow"/>
                            <input type="button" :value="btnValue" />
                            <span></span>
                        </section>
                        <custom-list v-show="selectShow" :list="list"  @receive="changeValueHandle"></custom-list>
                    </section>
                </section>`,
        methods: {
            changeValueHandle(value) {
                this.val = value;  //将选中的值赋给指定的input
                this.selectShow = false;  //隐藏下拉框
            }
        }
    });


    // 子组件
    Vue.component("custom-list", {
        props: ["list"],
        template: `
            <ul class="list">
                <li v-for="item in list" @click="selectValueHandle(item)">{{item}}</li>
            </ul>`,
        methods: {
            selectValueHandle(item) {
                //在子组件中触发，需要一个自定义事件
                // Key值 是父级的自定义事件
                this.$emit("receive", item);
            }
        }
    });

    new Vue({
        el: '#app',
        data: function() {
            return {
                list1: ["北京", "上海", "广州", "深圳"],
                list2: ["2017-2-25", "2017-2-26", "2017-2-27", "2017-2-28"],
            };
        }
    });
</script>
</body>
</html>

四、点击list变红、再次点击时恢复颜色，当变红时将当前值计入总数，颜色恢复时将该值从总数总移除：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.list{
margin: 0; padding: 0; width: 20%;
}
.list li{
margin: 0; padding: 0;list-style: none;height: 30px; line-height: 30px; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; cursor: pointer;
}
.green{
background: #00ff00;
}
.red{
background: #ff0000; color: #ffffff;
}
</style>
</head>

<body>
<div id="app">
    <ul class="list">
        <li v-for="(product, index) in products" :class="{'green': !product.isBg, 'red': product.isBg}" @click="handleClick(index)">{{product.name}}-{{product.price}}</li>
    </ul>
    <p>总价： ￥{{getTotal}}</p>
</div>

<script src="vue.js"></script>

<script>
let vm = new Vue({
    el: '#app',
    data:  {
            products: [
                {
                    name: '苹果',
                    price: 8,
                    isBg: false
                },
                {
                    name: '香蕉',
                    price: 3.9,
                    isBg: false
                },
                {
                    name: '橙子',
                    price: 8,
                    isBg: false
                },
                {
                    name: '哈密瓜',
                    price: 10,
                    isBg: false
                }
            ]
    },
    methods: {
        handleClick: function(index){
            this.products[index].isBg = !this.products[index].isBg;
        }
    },
    computed: {
        getTotal: function(){
            var sum = 0;
            for(var i = 0; i<this.products.length; i++){
                if(this.products[i].isBg){
                    sum += this.products[i].price;
                }
            }
            return sum;
        }
    }
});
</script>
</body>
</html>