原创

Vue小案例

初学Vue 小案例

v-for完成列表的循环展示,v-bind动态绑定属性(列表默认第一行为红色,点击某一行,该行变为红色)

效果如下

初识状态

点击某一行

点击某一行后

代码如下

<html lang="en">
<!--案例,实现一个列表,默认第一行为红色,点击某一行,则该行显示为红色.-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-on:click="btnCli(index)" v-for="(item,index) in movies" :class="{active : index === currentIndex}">{{item}}</li>
    </ul>
</div>


<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({
    el : '#app',
    data:{
      movies : ['四月是你的谎言','你的名字','魁拔','进击的巨人'],
      currentIndex : 0
    },
    methods : {
      btnCli : function (index) {
        this.currentIndex = index;
      }
    }
  })
</script>
</body>
</html>

Node

留言板