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

时间：2020-03-25 06:29:51 阅读：- 来源：

摘要Vue干货第一集:v-for循环v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 if {

Vue干货第一集:

v-for 循环

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：

&lt;!DOCTYPE html&gt;&lt;html lang=&#34;en&#34;&gt;&lt;head&gt;    &lt;meta charset=&#34;UTF-8&#34;&gt;    &lt;title&gt;循环&lt;/title&gt;    &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&#34;&gt;    &lt;meta name=&#34;apple-mobile-web-app-capable&#34; content=&#34;yes&#34;&gt;    &lt;meta name=&#34;apple-mobile-web-app-status-bar-style&#34; content=&#34;black&#34;&gt;    &lt;style&gt;    &lt;/style&gt;    &lt;script src=&#34;vue.js&#34;&gt;&lt;/script&gt;    &lt;script&gt;        window.onload=function(){            new Vue({                el:&#39;#box&#39;,                data:{                    arr:[&#39;apple&#39;,&#39;banana&#39;,&#39;orange&#39;,&#39;pear&#39;],                    json:{a:&#39;apple&#39;,b:&#39;banana&#39;,c:&#39;orange&#39;}                }            });        };    &lt;/script&gt;&lt;/head&gt;&lt;body&gt;    &lt;div id=&#34;box&#34;&gt;        &lt;ul&gt;            &lt;li v-for=&#34;value in arr&#34;&gt;                {{value}}            &lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

模板中使用 v-for：

&lt;template v-for=&#34;site in sites&#34;&gt;    &lt;li&gt;{{ site.name }}&lt;/li&gt;    &lt;li&gt;--------------&lt;/li&gt;  &lt;/template&gt;

v-for 可以通过一个对象的属性来迭代数据：

v-for 也可以循环整数

  &lt;li v-for=&#34;n in 10&#34;&gt;     {{ n }}    &lt;/li&gt;

computed 计算属性

&lt;div id=&#34;app&#34;&gt;  &lt;p&gt;原始字符串: {{ message }}&lt;/p&gt;  &lt;p&gt;计算后反转字符串: {{ reversedMessage }}&lt;/p&gt;&lt;/div&gt; &lt;script&gt;var vm = new Vue({  el: &#39;#app&#39;,  data: {    message: &#39;Runoob!&#39;  },  computed: {    // 计算属性的 getter    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)    }  }})&lt;/script&gt;

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

事件处理器

事件监听可以用v-on指令：

 &lt;button v-on:click=&#34;counter += 1&#34;&gt;增加 1&lt;/button&gt;

我们需要使用一个方法来调用 JavaScript 方法，v-on 可以接收一个定义的方法来调用

 &lt;button v-on:click=&#34;greet&#34;&gt;Greet&lt;/button&gt; methods: {    greet: function (event) {      // `this` 在方法里指当前 Vue 实例      alert(&#39;Hello &#39; + this.name + &#39;!&#39;)      // `event` 是原生 DOM 事件      if (event) {          alert(event.target.tagName)      }    }  }

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

&lt;button v-on:click=&#34;say(&#39;hi&#39;)&#34;&gt;Say hi&lt;/button&gt; methods: {    say: function (message) {      alert(message)    }  }

热点标签

「vue 头条 |苏州文化成都天立如何成为灵动升级一二三智连线中国连线中国中国电池 “第一童燕之教育

24小时新闻排行

热点图片

小男孩换了款佩奇雕发	果然女人胖了如“整容
黄晓明绿洲换新发型清	27岁女子熬夜追剧猝