vue的小例子

案例1；点击换色

想要的效果是：点击哪个哪个的颜色就变成红色

A

B

<template>

   <ul >

     <li    v-for="item in list"  v-bind:class="{finish:item.isfinished}">{{item.label}}</li>   //比较容易忽视这里面的也是循环得到的。让他绑定数组里的isfinished，他就是变量可以有不同的值

     </ul>

</template>

<script>

export default{

     data(){

        return {

            list:[      

               {label:'A',isfinished:true},

               {label:'B',isfinished:false}

             ]

           }

     }

}

<style>

.finish{color:red;}

</style>

案例2；添加内容

在上面的基础上进一步。

一个输入框输入的内容，添加到下面的 ul中。

<template>

<input type="text" v-model="newitem"    @keyup.enter="add"/>  //鼠标抬起点ernter就让执行这个添加的操作

   <ul >

     <li    v-for="item in list"  v-bind:class="{finish:item.isfinished}">{{item.label}}</li>   //比较容易忽视这里面的也是循环得到的。让他绑定数组里的isfinished，他就是变量可以有不同的值

     </ul>

</template>

<script>

export default{

     data(){

        return {

            list:[      

               {label:'A',isfinished:true},

               {label:'B',isfinished:false}

             ]

           },

      newitem:' '

     },

  method:{

     add(){

       this.list.push({      //push是向数组中添加内容,下面的两个字段也是data里面就有的。

            label:this.newitem , //这里的this其实是data里面的元素

            isfinished:false

      });

   this  newitem="";  //添加完以后这个里面的内容清空

         

    }

    }

}

<style>

.finish{color:red;}

</style>

案例3；选项卡

实现选项卡的效果

<div id="main">
            <nav @click.prevent>   // @click.prevent防止链接打开 URL：
                <a v-for="item,index in items" :class="{'show': item.active}" @click="makeActive(item,index)">{{item.name}}</a>       // index是索引
            </nav>
    <p>你选择的是： <b>{{activenum}}</b></p>
        </div>

<style>

.show{background-color:red;} 

</style>

<script>

export default{

 data() {
            return {
                activenum:'HTML',   把选中的元素放这里
                items:[
                   {name:'HTML', active:true},  //active是决定他的状态的
                   {name:'CSS', active:false},
                  {name:'JavaScript', active:false},
                  {name:'Vue.js', active:false}
        ]
            }
        },

methods:{

        makeActive(item, index){

         this.activenum=item.name;//获取选中的元素

          for(var i=0;i<this.items.length;i++){   //所有的选项卡都是未选中的状态
                    this.items[i].active=false;
                }
                this.items[index].active=true; // 点击的那个元素使用show的样式

}

}

案例4；合计总价

    <div class="main">
        <ul>
            <li v-for="item in items" @click="toggleA(item)" :class="{'active':item.active}">
                <span>{{item.name}}</span>
                <span>{{item.price |currency}}</span>  //currency过滤器
            </li>
        </ul>
        <p>合计：{{total |currency}}</p>   //total合计值，需要随着你选择的内容增加或者减少
    </div>  

<script>

data(){
        return{
            items:[
            {name: 'Web Development1',price:20,active:true},
            {name: 'Web Development2',price:12,active:false},
            {name: 'Web Development3',price:35,active:false},
            {name: 'Web Development4',price:2,active:false},
            ]
       }
    },
    computed:{
        total(){   注意虽然这个total是后面有括号的，但是在页面中写的时候直接写{{total}}
            var total=0;
         this.items.forEach(function(s){   //items循环获得选中的价格
                if(s.active){total+=s.price;}       //只取选中状态的price相加
            })
        return total;  千万别忘记了最后要返回total
        }    
    },

    methods:{
        toggleA(i){  //点中就改变状态
            i.active=!i.active;
        },
    },
   filters:{   //过滤器，所有数字保留两位小数

       currency(value){
           return (value-0).toFixed(2);
       }
    }
}

</script>