vue-点击列表中的哪一项, 该项的文字就会变成红色小练习

--------------------1------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

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

<body>
<div id="app">
<h2 :class="{active: isActive}">{{message}}</h2>
<button v-on:click="anyixia">按钮</button>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      // isLine: true
    },
    methods: {
      anyixia: function () {
        this.isActive = !this.isActive

      }
    }
  })
</script>
</body>
</html>



--------------------2--------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

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

<body>
<div id="app">
  <!--  <h2 class="active">{{message}} </h2>-->
  <!--  动态方式-->
  <!--  <h2 :class="active">{{message}}</h2>-->
  <!--  键值对-->
  <!--  <h2 :class="{key1: value1,key2: value2}">{{message}}</h2>-->
  <!--  布尔值true，把类加到前面去-->
  <!--  布尔值false，不加-->
  <!--  <h2 :class="{类名1: true,类名2: boolean}">{{message}}</h2>-->
  <h2 :class="{active: isActive}">{{message}}</h2>
  <!--  这里面还可以加class，他会进行合并-->
  <!--  <h2 class="Title" :class="{active: isActive,line: isLine}">{{message}}</h2>-->
<!--  <h2 class="title" :class="getClass()">{{message}}</h2>-->
  <button v-on:click="anyixia">按钮</button>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      // isLine: true
    },
    methods: {
      anyixia: function () {
        this.isActive = !this.isActive

      }
      // getClass: function () {
      //   return {active: this.isActive}
      // }
    }
  })
</script>
</body>
</html>

----------------------3----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .active{
    color:red;
  }
</style>
<body>
<!--&lt;!&ndash;作业需求：点击列表中的哪一项，哪一项的文字就会变成红色&ndash;&gt;-->


<!--<div id="app">-->
<!--  <ui>-->
<!--    <li v-for="(m,index) in movies" :class="count==index" v-on="anyixia(index)">{{index}}{{m}}</li>-->
<!--&lt;!&ndash;    m是变量名，随便什么都可以&ndash;&gt;-->
<!--  </ui>-->
<div id="app">
  <ul>
    <li v-for="(m,index) in movies" v-bind:class="count==index ?  'active'  :''" @click='anyixia(index)'>{{m}}</li>
  </ul>
</div>

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


<script type="text/javascript">
  const app = new Vue ({
    el:'#app',
    data:{
      count:-1,
      movies:['海王','冰雪奇缘','星际穿越','少年派']
    },
    methods:{
      anyixia:function(index){
        this.count = index;
      }
    }
  })
</script>
</body>
</html>
posted @ 2020-03-25 15:23  大王叫我来巡山啊啊啊  阅读(684)  评论(1)    收藏  举报