vue 1-2 简单实例 

<!--要求：-->
<!--    ‘火影’初始为红色-->
<!--    点击每一个动漫名称，该名称变为红色-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>

    <style>
        .colour {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in message" v-on:click="btnClick(index)" v-bind:class="{colour: currentIndex == index}">
            {{index}}.{{item}}
        </li>
    </ul>
</div>

<script src="../../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            currentIndex: 0,
            isActive: false,
            message: ['火影', '死神', '海贼王', '进击的巨人']
        },
        methods:{
            btnClick(e){
                this.currentIndex = e
                this.isActive = !this.isActive
                console.log(e)
            }
        },
    })
</script>
</body>
</html>

 

posted @ 2021-03-11 18:15  黑无常  阅读(59)  评论(0)    收藏  举报