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

2024-01-09 22:47:04

购物车案例

<!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：去除首位的空格

<!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发送

<!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

<!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

<!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>

文章来源:https://blog.csdn.net/flclyz/article/details/135490566
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！