v-model双向绑定数据的小例子：简单购物车，简单计算器

本文链接：https://blog.csdn.net/weixin_44153063/article/details/103542743

一、简单购物车

把<script src="vue.js"></script>的src换成自己的路径即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单购物车</title>
    <script src="vue.js"></script>
    <style>
        table{
            border: 1px solid black;
            width: 100%;
        }
        th{
            height:50px;
        }
        th,td{
            border-bottom: 1px solid #dddddd;
            text-align: center;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="div1">
    <table>
        <tr>
            <th>序号</th><th>商品名称</th><th>商品价格</th><th>购买数量</th><th>操作</th>
        </tr>
        <tr v-for="iphone in Ip_Json">
            <td>{{ iphone.id}}</td><td>{{ iphone.name }}</td>
            <td>{{ iphone.price }}</td>
            <td><button v-bind:disabled="iphone.conut===0" v-on:click="iphone.count-=1">-</button>
            {{ iphone.count }}
           <button v-on:click="iphone.count+=1">+</button></td>
            <td><button v-on:click="iphone.count=0">移除</button></td>
        </tr>
    </table>
    总价：${{totalPrice()}}
</div>
</body>
<script>
    var vm = new Vue({
        el:'#div1',
        data:{
            Ip_Json:[{
                id:1,
                name:'iphone8',
                price:5099,
                count:1
            },{
                id:2,
                name:'iphone xs',
                price:8699,
                count:1
            },{
                id:3,
                name:'iphone xr',
                price:6499,
                count:1
            }]
        },
        methods:{
            totalPrice:function () {
                var totalP =0;
                for (var i = 0, len = this.Ip_Json.length; i < len; i++) {
                    totalP+= this.Ip_Json[i].price*this.Ip_Json[i].count;
                }
                return totalP;
            }
        },
        });
</script>
</html>

在这里插入图片描述

二、简单计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的计算器</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="x" />
    <select v-model="opt">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="y" />
    <input type="button" value="=" @click="res"/>
    <input type="text" v-model="result" />

</div>
</body>
<script>
    var vm =new Vue({
        el:'#app',
        data:{
            x:0,
            y:0,
            result:0,
            opt:'+',
        },
        methods:{
            res(){
              switch (this.opt) {
                  case "+":
                      this.result=parseFloat(this.x)+parseFloat(this.y);
                      break;
                  case "-":
                      this.result=parseFloat(this.x)-parseFloat(this.y);
                      break;
                  case "*":
                      this.result=parseFloat(this.x)*parseFloat(this.y);
                      break;
                  case "/":
                      this.result=parseFloat(this.x)/parseFloat(this.y);
                      break;
              }
/*                var data ="this.result=parseInt(this.x)"+this.opt+"parseInt(this.y)";
                eval(data);*/
            },
        }
    });
</script>
</html>

样子是有点简陋，不过在这只是提供一个思路，如果有兴趣的话，可以改进一下
在这里插入图片描述
还有一个省事的办法就是把 res 的方法改为

var data ="this.result=parseInt(this.x)"+this.opt+"parseInt(this.y)";
                eval(data); //eval可以将字符串转换为JS语句来执行。

不过这样写是不推荐的，因为可能会被注入恶意代码不安全。详情可以百度搜索
不过在这是无所谓的，。。。