前端进阶Vue框架-----模板语法小案例

小不言啊

已于 2022-02-14 17:03:51 修改

阅读量90

点赞数

文章标签： vue.js 前端 elementui

于 2022-02-14 16:02:20 首次发布

本文链接：https://blog.csdn.net/m0_61656944/article/details/122926421

版权

本文通过一个简单的前端案例，详细讲解了在Vue框架中如何利用模板语法实现点击元素颜色变化的功能，深入理解Vue的响应式原理和事件处理。

摘要由CSDN通过智能技术生成

 <script src="/lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text"  v-model="mytest">
        
        <button @click="tianjia()">添加</button>

        <ul v-show="datalist.length">
            <!-- 循环的时候索引值也循环出来 -->
            <li v-for="(data,index) in datalist">
                {{data}}
                <button @click="shanchu(index)">删除</button>
            </li>
        </ul>

        <div v-show="!datalist.length">已经没有事件了噢，可以添加噢</div>
    </div>


    <script>
     var mv = new Vue({
            el:"#box",
            data :{
                
                datalist: ['111','222','333','444'],
                mytest:"aaaa"
            },
            methods:{
                tianjia(){

                    this.datalist.push(this.mytest);
                    // 清空
                    this.mytest = " ";

                },
                shanchu(index){
                    console.log(index)
                    // 从第几个开始删除，删除几个
                    this.datalist.splice(index,1);
                }
            }
        })
    </script>
    
</body>

案例二：点击变色

  <script src="/lib/vue.js"></script>

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
            display: flex;
        }

        li{
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }


        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(data,index) in datalist"  :class="current===index? 'active' : ' ' "
            @click="dianji(index)">
                {{data}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                datalist:['首页','列表','我的'],
                current:0
            },
            methods:{
                dianji(index){
                
                    this.current = index;
                }
            }
        })
    </script>
    
</body>