Vue学习笔记day02：计算属性、事件监听、点击列表中的哪一项，那么该项的文字变成红色案例

最新推荐文章于 2022-01-14 10:22:15 发布

程序猿二鍋頭

最新推荐文章于 2022-01-14 10:22:15 发布

阅读量175

点赞数

分类专栏：大前端文章标签： vue

本文链接：https://blog.csdn.net/qq_45441466/article/details/109907301

版权

大前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

事件监听：

v-on的基本使用：

v-on的参数问题：

<div id="app">
  <!--1.事件调用的方法没有参数-->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>
  <!--2.在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的-->
<!--  <button @click="btn2Click(123)">按钮2</button>-->
<!--  <button @click="btn2Click()">按钮2</button>-->
  <button @click="btn2Click">按钮2</button>

  <!--3.方法定义时，我们需要event对象，同时又需要其他参数-->
  <!--在调用方法时，如何手动的获取到浏览器参数的event对象: $event-->
  <button @click="btn3Click('abc',$event)">按钮3</button>
  <button>按钮4</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btn1Click(){
        console.log("btn1Click");
      },
      btn2Click(event){
        console.log("-----"+event)
      },
      btn3Click(abc,event){
        console.log(abc,"------"+event);
      }
    }

  })
  //如果函数需要参数，但是没有传入，那么函数的形参为undefined
  // function abc(name) {
  //   console.log(name);
  // }
  //
  // abc();
</script>

v-on的修饰符：

在某些情况下，我们拿到 event 的目的可能是进行一些事件处理。

Vue 提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation () 。

.prevent - 调用 event.preventDefault () 。

.{ keyCode | keyAlias } - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

<div id="app">
  <!--1.  .stop修饰符的使用: 不加上.stop  点击aaaaaaa 也会触发btnClick事件-->
    <div @click="divClick">
      aaaaaaa
      <button @click.stop="btnClick">按钮</button>
    </div>

  <!--2. .prevent修饰符的使用   禁止提交到某个url-->
  <form action="baidu">
    <input type="submit"  value="提交" @click.prevent="submitClick">
  </form>

  <!--3. .监听某个键盘的键帽的点击   按enter键才会触发事件-->
  <input type="text" @keyup.enter="keyUp">

  <!--4. .once修饰符的使用   只触发一次事件-->
  <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          message : '你好'
      },
    methods: {
      divClick(){
        console.log('divClick');
      },
      btnClick(){
        console.log('btnClick');
      },
      submitClick() {
        console.log('submitClick');
      },
      keyUp() {
        console.log('keyUp');
      },
      btn2Click(){
        console.log('btn2Click');
      }
    }
  })
</script>

计算属性：

计算属性的基本使用：
计算属性的复杂操作：
计算属性的setter和getter：
计算属性和methods对比：

点击列表中的哪一项，那么该项的文字变成红色：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>

</head>
<body>
<!--作业需求： 点击列表中的哪一项，那么该项的文字变成红色-->
<div id="app">
  <ul>
    <li :class="{active: currentIndex === index}"
        v-for="(m, index) in movies"
        @click="liClick(index)">
      {{index}}--{{m}}
    </li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
      currentIndex: 0 //记录当前谁变红
    },
    methods: {
      liClick: function (index) {
        this.currentIndex = index;
      }
    }
  })
</script>

</body>
</html>

程序猿二鍋頭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记day02：计算属性、事件监听、点击列表中的哪一项，那么该项的文字变成红色案例

事件监听：v-on的基本使用： v-on的参数问题：<div id="app">  <button @click="btn1Click()">按钮1</button> <button @click="btn1Click">按钮1</button> <!-- <but
复制链接

扫一扫

专栏目录