Vue复习(三)

最新推荐文章于 2022-05-22 12:19:58 发布

Dreamer_WYL

最新推荐文章于 2022-05-22 12:19:58 发布

阅读量225

点赞数

本文链接：https://blog.youkuaiyun.com/Dreamer_WYL/article/details/79865523

版权

本文主要复习Vue.js中的v-show指令用于条件展示元素，v-for循环遍历JS对象并显示内容，以及v-on事件处理器的使用。v-on绑定的事件如click、keyup等，可以配合函数输出事件对象属性，帮助开发者了解用户交互详情。同时，探讨了JavaScript中的event对象及其srcElement属性，它是事件触发的源元素，提供了事件发生时的相关信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素显示
v-show
标记是否显示html元素（v-show设置的标记在html DOM中不会消失）

JS对象迭代

v-for循环js对象迭代，把对象内容循环显示到页面上

<h1>JS对象迭代</h1>
<div v-for="(value,key) in mygame">
 {{ key }} : {{ value }}
</div>

为什么这里的key在前，value在后

mygame: {
            title: "afisj好fasf",
            price: 350,
            pubdate: "2018年夏季"，
            category: "设计",
            agerange: "全年级",
           },

事件处理器

v-on:(event)/@(event)
页面元素的时间绑定。（click,keyup,load等等）

methods: {
      txtKeyup: function(event){
          this.debugLog(event);
      },
      btnClick: function(event){
          this.debugLog(event);
      },
      debugLog:function(event){
          console.log(
              event.srcElement.tagName,
              event.srcElement.id,
              event.srcElement.innerHTML,
              event.key?event.key:""
          );
      },
  },

txtKeyup和btnClick是常见的js函数，而debugLog是输出log的函数，当用户在输入框输入内容或者点击按钮都会触发这个函数，函数本身就是打印出event事件对象的属性，就是上面html里传过来的事件对象，以便于知道按下了哪个按钮或者在哪个输入框输入了什么内容

（ PS:JS中 event.srcElement是什么意思， event是什么？)
event是事件对象，比如你按了某个键（或者单击等，反正能触发事件的），那你在处理时候可能会需要一些信息，比如说是哪个元素被触发的，这个元素也就是你所问的event.srcElement(事件的源对象)，通过它可以得到事件的对象，如果你是按键事件如keyup,keydown，那么在event.keyCode会得到这个键的ascii码，如果是鼠标事件，可能还会有当前鼠标的坐标等等，总之，这个对象里面包含了事件发生时的各种数据。