Vue的基本指令

v-text(): v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}, 即插值表达式

v-html: 将内容以html的形式呈现在页面。

v-bind: 将值绑定到标签的自定义属性上，形式为 v-bind:title=“mytitle”，可以简写为 :属性名

v-cloak: 用来控制当只有数据呈现才显示Vue对应的dom元素。

v-model: 双向数据绑定。

v-if:值如果为true的情况下，显示标签，如果为false会移除标签。

v-else-if: 与v-if配合使用。

v-else: 与v-if配合使用。

v-show: 如果为true,显示信息，如果为false则隐藏标签。

v-for: 循环遍历。语法形式为 v-for=“item in list”

v-on:click: 点击事件，可以简写为@click。

<template>
    <div class="hello">

        <div>
            <ul class="gry">
                <li v-for="(value,key,index) in names" :key="index" :class="{'current':flag==index}"  @click="changelibg(index,value)">
                    {{key}}
                </li>
            </ul>
            <div v-for="(index) in names" :key="index" v-show="flag==index">
                {{desc}}
            </div>
        </div>

<br>
        <button @click="changeyange">变色</button>
        <button @click="changeBiger">变大</button>
        <button @click="changeSmall">变小</button>
        <button @click="hideen">隐藏</button>
        <button @click="reset">重置</button>
        <div class="center litletop" style="background:red" :class="{blue:isTure,normal:true,hideen:isSee}" :style="{'width':dwidth+'px','height':dheight+'px'}" >
        </div>


        <table @click="count" class="center litletop">
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>

            <tr v-for="(item,index) in goods" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>￥{{item.price}}</td>
                <td><button @click="jian(index)">-</button>{{item.amount}}<button @click="add(index)">+</button></td>
                <td><button  @click="remove(index)">移除</button></td>
            </tr>
        </table>
        <div v-if="goods.length==0">
            购物车为空~~
        </div>
        <div>
            ￥{{sum}}
        </div>

    </div>
  </template>
  
  <script>
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'person',
    props: {
      msg: String
    },
    data(){
        return{
            yanse:"blue",
            isTure:true,
            dsize:"normal",
            see:"hideen",
            isSee:false,
            dwidth:100,
            dheight:100,
            names:{"商品介绍":"商品介绍模块","规格与包装":"规格与包装模块","售后保障":"售后保障模块","商品评价":"商品评价模块","手机社区":"手机社区模块"},
            current:'current',
            flag:0,
            desc:"",
            goods:[{id:1,name:"《算法导论》",date:"2006-9",price:85,amount:1},
            {id:2,name:"《UNIX编程艺术》",date:"2006-2",price:59,amount:1},
            {id:3,name:"《编程珠玑》",date:"2008-10",price:39,amount:1},
            {id:4,name:"《代码大全》",date:"2006-3",price:128,amount:1}],
            sum:311
        }
    },
    methods:{
        changeyange(){
            this.isTure=!this.isTure;
        },
        changeBiger(){
            this.dheight=200;
            this.dwidth=200;
        },
        changeSmall(){
            this.dheight=50;
            this.dwidth=50;
        },
        reset(){
            this.isTure=false;
            this.dheight=100;
            this.dwidth=100;
            this.isSee=false;
        },
        changelibg(i,key){
            this.flag=i;
            this.desc=key;
            console.log(this.flag);
        },
        hideen(){
            this.isSee=!this.isSee;
        },
        count(){
            this.sum=0;
            for(var i=0;i<this.goods.length;i++){
                var xiaoji = this.goods[i].amount*this.goods[i].price;
                this.sum+=xiaoji;
            }
        },
        add(i){
            this.goods[i].amount++; 
        },
        jian(i){
            if(this.goods[i].amount>1){
                --this.goods[i].amount;
            }
        },
        remove(i){
            if(i==0){
                this.goods.splice(i,1);
            }else{
                this.goods.splice(i,i);
            }
           
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  .normal{
    width: 100px;
    height: 100px;
  }
  .blue{
    background-color: blue !important;
  }
  .current{
    background-color: red !important;
  }
  .gry{
    background-color: gray;
  }
  .hideen{
    display: none;
  }
  .center{
    margin: 0 auto;
  }
  .litletop{
    margin-top: 20px;
  }
  </style>

 

 vue的特性就是对数据进行操作，减少对Dom的操作，在data中定义的属性会是全局的，只要你改变了属性也会实时改变，不需要你再像js那样，改变之后重新调用方法显示。

1.  ：class  就是绑定class，根据条件来判断是否添加类。

2.  ：style  就是绑定style  ，根据条件来判断是否添加样式。