2018-09-15 vue第三课（购物车，v-bind v-

作者: LYH2312 | 来源:发表于2018-09-15 09:23 被阅读0次

2018-09-15 vue第三课（购物车，v-bind v-
Vue 缩写
测开vue学习2：指令
vue指令
Vue基础指令
vue v-show v-bind v-if v-
【Vue】常用指令之v-bind
vue-cli 双向绑定 v-model, 样式绑定 v-bin
国庆Vue基础补全（一）
vue 中修改属性

1.购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            width: 1000px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="itany">
        <table border='1' bordercolor='black' cellspacing='0'>
                <tr>
                    <th>数量</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                </tr>
                <tr v-for='(value,index) in arr'>
                    <td>{{index+1}}</td>
                    <td>{{value.name}}</td>
                    <td>${{value.money}}</td>
                    <td>
                        <button v-on:click="jian(index)">-</button>
                        {{value.case}}
                    <button v-on:click="jia(index)">+</button>
                    </td>
                    <td>{{value.price}}</td>
                </tr>
                <tr>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                    <td>总价{{all}}</td>
                </tr>
        </table>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                arr:[
                    {xu:1,name:"vivo",money:3999,case:0,price:0},
                    {xu:2,name:"oppo",money:2890,case:0,price:0},
                    {xu:3,name:"华为",money:3259,case:0,price:0},
                ],
                all:0
            },
            methods:{
                jian:function(i){
                    if(this.arr[i].case>=1){     //判断当大于等于1时，当点击加的时候执行的代码块
                        this.arr[i].case-=1,
                        this.arr[i].price=this.arr[i].case*this.arr[i].money,    //相乘价格
                       this.all-=this.arr[i].money   //总价
                    }
                },
                jia:function(i){   当点击减号的时候执行的代码块
                    this.arr[i].case+=1,    //数量
                        this.arr[i].price=this.arr[i].case*this.arr[i].money,   //相乘价格
                        this.all+=this.arr[i].money    //总价
                }
            }
        })
    </script>
</body>
</html>

样式

QOQ%`{)6`6(Y1B1V8QF0$QP.png

2.v-bind v-show v-if

（1）v-bind 绑定一个属性；
简写方式：：“属性名”=“值”
多用于src href；

（2）v-show 控制元素的显示或隐藏=>方式为display：none

<div id="itany">
    <button v-on:click="fun">点击切换</button>
    <div class="new" v-show="!see">{{msg}}</div>
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#itany",
        data:{
            msg:"heelo word",
            see:true
        },
        methods:{
            fun:function(){
              this.see=!this.see
            }
        }
    })


    /*&& 与
     !非
     ||或*/
</script>

（3）v-if 也可用来控制元素的显示或隐藏=>方式为visibility：hidden

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visiblility:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

（4）toFixed()放置要保留几位小数，四舍五入

（5）随机数公式 num:Math.floor(Math.random()*(max-min+1)+min)

3.图片间的点击相互切换

<div id="itany">
    <img v-bind:src="url" alt="" v-on:click="chg">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            url:'img/1.jpg',
            flag:true
        },
        methods:{
            chg:function(){
                if(this.flag){
                    this.url='img/2.png';
                    this.flag=false;
                }else{
                    this.url='img/1.jpg';
                    this.flag=true
                }
            }
        }
    })

</script>