[JavaScript知识库] 每周小结（前端）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 每周小结（前端） -> 正文阅读

[JavaScript知识库]每周小结（前端）

小黑记事本小案例

    <footer class="footer" >
      <span class="todo-count" v-if="list.length!=0">
        <strong>{{list.length}}</strong> items left
      </span>
        <button class="clear-completed" @click="clear" v-if="list.length!=0">
            Clear
        </button>
    </footer>
</section>
<!-- 底部 -->
<footer class="info">
    <p>
        <a href="http://www.itheima.com/"><img src="../image/black.png" alt="" /></a>
    </p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#todoapp",
        data: {
            list: ["写代码", "吃饭饭", "睡觉觉"],
            inputValue: "好好学习,天天向上"
        },
        methods: {
            add: function () {
                this.list.push(this.inputValue);
            },
            remove:function(index){
                console.log("删除");
                console.log(index);
                this.list.splice(index,1);
            },
            clear:function (){
                this.list = []
            }
        },
    })
</script>
</body>
</html>

购物车小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实现购物车案例</title>
</head>
<body>
<div id="app">
    <div v-if="items.length">
        <h1> {{msg}}  computed{{  counts }}</h1>
        编号: <input type="text" v-model="item.id">
        名称: <input type="text" v-model="item.name">
        单价: <input type="text" v-model="item.price">
        数量: <input type="text" v-model="item.count">
        <button @click="addCount"> 添加到购物车 </button>
        <br><br><br>
        <table border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in items" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><input type="button" value="-" @click="remove(index)"> {{item.count}} <input type="button" value="+" @click="add(index)"> </td>
                <td>{{item.count * item.price}}</td>
                <td><button @click="removeClick(index)">删除</button></td>
            </tr>
        </table>
        <h3>总价格: {{ totalPrice }}</h3>
        <h3>总价格: {{ totalPrice }}</h3>
        <h3>总价格: {{ totalPrice }}</h3>
    </div>
    <h1 v-else>购物车为空</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            count:0,
            msg:'购物车案例',
            item : {},
            items:[
                {id:1,name:'iphone12',price:4899,count:1,delete:"删除"},
                {id:2,name:'redmik30pro',price:3199,count:1,delete: "删除"},
            ]
        },
        methods: {
            add:function (idx){
                this.items[idx].count++
            },
            remove:function (idx){
                if (this.items[idx].count>1) {
                    this.items[idx].count--
                } else {
                    alert('购买的商品不能少于一件')
                }
            },
            // totalPrice:function (){
            //     var totalprice = 0
            //     for (var i=0 ; i<this.items.length ; i++){
            //         totalprice +=this.items[i].price *this.items[i].count
            //     }
            //     return totalprice
            // },
            addCount:function (){
                if (!this.item.id){
                    alert('请输入编号');
                    return false
                }
                if (!this.item.name){
                    alert('请输入名称');
                    return false
                }
                if (!this.item.price){
                    alert('请输入价格');
                    return false
                }
                if (!this.item.count){
                    alert('请输入数量');
                    return false
                }
                if (!(this.item.count>0)){
                    alert('请输入正确数量');
                    return false
                }
                this.items.push(this.item)  //放入数组
            },
            removeClick(index){
                this.items.splice(index,1)
            }
        },
        computed : {
            counts:function (){
                return this.count+10
            },
            totalPrice:function (){
                // var totalprice = 0
                // // for (var i=0 ; i<this.items.length ; i++){
                // //     totalprice +=this.items[i].price *this.items[i].count
                // // }
                // for (let item of this.items) {
                //     totalprice +=item.price*item.count
                // }
                // return totalprice
                return this.items.reduce(function (pre,item){
                    return pre + item.price*item.count
                },0)
            },
        }
    })
</script>
</body>
</html>