vue购物车案例,v-model 之 lazy、number、trim,与后端交互

购物车案例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>购物车</h1>
    <table>
        <thead>
        <tr>
            <th>商品id</th>
            <th>商品名</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="goods in goodsList">
            <th>{{goods.id}}</th>
            <td>{{goods.name}}</td>
            <td>{{goods.price}}</td>
            <td>
                <span @click="handleJian(goods)">-</span>
                <input type="text" v-model="goods.count">
                <span @click="handleAdd(goods)">+</span>
            </td>
            <td>
                <input type="checkbox" v-model="checkGoodList" :value="goods" @change="handleCheckOne">
            </td>
        </tr>
        </tbody>
    </table>
            <h3>选中的商品:{{checkGoodList}}</h3>
            <h3>是否全选:{{checkAll}}</h3>
            <h3> 总价格:{{getPrice()}}</h3>
</div>
</body>
<script>
    new Vue({
        el:'#d1',
        data:{
            goodsList: [
                {id: 1, name: '短袖', price: 99, count: 2},
                {id: 2, name: '短裤', price: 39, count: 1},
                {id: 3, name: '短裙', price: 189, count: 6},
                {id: 4, name: '短袜', price: 8, count: 8},
                {id: 5, name: '长筒袜', price: 4, count: 88},
                {id: 6, name: '过膝袜', price: 5, count: 90},
            ],
            checkGoodList:[],
            checkAll:false
        },
        methods:{
            getPrice(){
                var total=0
                for (var item of this.checkGoodList){
                    total+=item.price * item.count
                }
                return total
            },
            handleCheckAll(){
                if (this.checkAll){
                    this.checkGoodList=this.goodsList
                }else {
                    this.checkGoodList = []
                }
            },
            handleCheckOne(){
                if (this.checkGoodList.length==this.goodsList.length){
                    this.checkAll=true
                }else {
                    this.checkAll=false
                }
            },
            handleAdd(goods) {
                goods.count++
            },
            handleJian(goods) {
                if (goods.count > 1) {
                    goods.count--
                } else {
                    alert('宝贝不能再少了')
                }
            }
        }
    })
</script>
</html>

v-model 之 lazy、number、trim

lazy:等待input框的数据绑定失去焦点之后再变化

number:数字开头,只保留数字,后面的字母不保留;字母开头,都保留

trim:去除首位的空格

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>input 和v-model</h1>
    <input type="text" v-model="name">

    <h1>v-model修饰符:lazy、number、trim</h1>
    <input type="text" v-model.lazy="s1">--->{{s1}}
    <br>
    <input type="text" v-model.number="s2">--->{{s2}}
    <br>
    <input type="text" v-model.trim="s3">--->{{s3}}


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '彭于晏',
            s1: '',
            s2: '',
            s3: '',

        },
    })
</script>
</html>

与后端交互

1 使用jq的ajax ===》不好---》引入了jq框架,好多功能用不到

2 原生js fetch

提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分

fetch('http://127.0.0.1:5000/userinfo')

.then(response => {

return response.json();

}).then(data => {

this.username = data.username

this.age = data.age

});

3 axios 第三方ajax,只有ajax,没有别的,小--》底层还是基于XMLHttpRequest

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

jq发送

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jq.js"></script>
</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名:{{username}}</p>
    <p>年龄:{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求,拿到数据,赋值给 username和age 页面就有了
                // 1 发送请求方式1 使用 jq的ajax
                $.ajax({
                    url: 'http://127.0.0.1:5000/userinfo',
                    method: 'get',
                    success: data => {
                        // CORS policy  跨域问题---》解决---》后端响应头中加入:Access-Control-Allow-Origin
                        console.log(typeof data)
                        data = JSON.parse(data)
                        this.username = data.username
                        this.age = data.age
                    }
                })
            }
        }
    })
</script>
</html>

原生js

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jq.js"></script>
</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名:{{username}}</p>
    <p>年龄:{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求,拿到数据,赋值给 username和age 页面就有了
                // 1 原生fetch发送请求
                fetch('http://127.0.0.1:5000/userinfo')
                    .then(response => {
                        return response.json();
                    }).then(data => {
                    this.username = data.username
                    this.age = data.age
                });
            }
        }
    })
</script>
</html>

axios

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名:{{username}}</p>
    <p>年龄:{{age}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: ''

        },
        methods: {
            handleLoad() {
                // 后端发送请求,拿到数据,赋值给 username和age 页面就有了
                // 1 axios发送请求
                axios.get('http://127.0.0.1:5000/userinfo')
                    .then(res => {
                        console.log(res.data); //真正的响应体的数据在res.data
                        this.username = res.data.username
                        this.age = res.data.age
                    })
                    .catch(error => {
                        console.log(error);
                    });

            }
        }
    })
</script>
</html>
相关推荐
江号软件分享31 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js