您所在的位置: > 主页 > 云南企业新闻网 > 企业 > 正文
「vue干货1」循环,计算属性,事件处理器!来源: 日期:2020-11-19 07:10:33  阅读:-

    Vue干货第一集:

    v-for 循环
    • v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
    • v-for 可以绑定数据到数组来渲染一个列表:
            循环                            
    • {{value}}
    • 模板中使用 v-for:
    • v-for 可以通过一个对象的属性来迭代数据:

    「vue干货1」循环,计算属性,事件处理器

    • v-for 也可以循环整数
      
  • {{ n }}
  • computed 计算属性

    原始字符串: {{ message }}

    计算后反转字符串: {{ reversedMessage }}

    实例中声明了一个计算属性 reversedMessage 。
    提供的函数将用作属性 vm.reversedMessage 的 getter 。
    vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。

    事件处理器
    • 事件监听可以用v-on指令:
     
    • 我们需要使用一个方法来调用 JavaScript 方法,v-on 可以接收一个定义的方法来调用
      methods: {    greet: function (event) {      // `this` 在方法里指当前 Vue 实例      alert('Hello ' + this.name + '!')      // `event` 是原生 DOM 事件      if (event) {          alert(event.target.tagName)      }    }  }
    • 除了直接绑定到一个方法,也可以用内联 JavaScript 语句:
     methods: {    say: function (message) {      alert(message)    }  }

    (正文已结束)

    免责声明及提醒:此文内容为本网所转载企业宣传资讯,该相关信息仅为宣传及传递更多信息之目的,不代表本网站观点,文章真实性请浏览者慎重核实!任何投资加盟均有风险,提醒广大民众投资需谨慎!