vue的小例子

来源：互联网发布：开源销售管理系统 php 编辑：程序博客网时间：2024/06/05 08:35

案例1；点击换色

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

<ul >

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

</ul>

</template>

export default{

data(){

return {

list:[

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

{label:'B',isfinished:false}

]

}

<style>

.finish{color:red;}

</style>

案例2；添加内容

在上面的基础上进一步。

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

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

<ul >

</ul>

</template>

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>

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>

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>

0 0