Vue笔记 (五) 阶段性小案例

鼠标点击改变样式

如下图，给出一个列表，鼠标点击样式跟着改变。

css:

.active {
     
  color: red;
}

html：

<div id="app">
  <ul>
    <li v-for="(item,index) in movies"
        :class="{active:index === currentIndex}"
        @click="changeColor(index)"
    >
      {
    {item}}
    li>
  ul>
div>

js:

const app = new Vue({
     
  el: "#app",
  data: {
     
    movies: ["Html","Css","JavaScript","Vue"],
    currentIndex: 0 // 默认选中第几个
  },
  methods: {
     
    changeColor (index) {
     
      this.currentIndex = index
    }
  }
})

购物车小案例

html、css:

js: