VUE一些小功能案例

青椒切小块

于 2020-04-08 00:47:59 发布

阅读量817

点赞数 1

分类专栏：笔记 vue

本文链接：https://blog.youkuaiyun.com/ShangMY97/article/details/105361455

版权

这篇博客整理了Vue.js的一些实用小功能，包括实现计数器功能，列表项点击变色的效果，以及购物车案例，详细介绍了购物车中增加、减少商品、删除商品及计算总价的多种方法，如普通循环、for...in、for...of和使用reduce()函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计数器

<div id="app">
    <h2>当前计数: {
   {
   counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>

<script>
    const obj = {
   
        counter: 0,
    }
    new Vue()
    const app = new Vue({
   
        el: '#app',
        data: obj,
        methods: {
   
            add: function () {
   
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
   
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>

列表点击变色

在这里插入图片描述点击

<style>
    .active{
   
        color: red;
    }
</style>

<div id="app">
    <ul>
        <li v-for="(item,index) in numb"
        :class="{'active':redcolor === index}"
        @click="liClick(index)">//这个要把index的值传过去，并且注意大小写
        {
   {
   index}}.{
   {
   item}}
        </li>

最低0.47元/天解锁文章