Vue复习(三)

元素显示
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码，如果是鼠标事件，可能还会有当前鼠标的坐标等等，总之，这个对象里面包含了事件发生时的各种数据。