如果你是经营一个电商平台的商人的话，你一定有很多页面都需要渲染商品列表的输出。v-for指令允许循环我们的数组对象，用 “element in arrayObj” 的方式，念作“循环arrayObj这个数据对象里的每一个element”。
下面的例子中，我们将会利用v-for指令循环输出一个商品列表。每一个商品都会在一个li中，li中输出商品的名称、价格和商品类型。
<div> <ul> <li v-for="el in products"> {{ el.name }} - ￥ {{ el. price }} - {{ el. category }} </li> </ul> </div>
<script> var V = new Vue({ el : '#vueInstance', data : { products : [ {name: 'microphone', price: 25, category: 'electronics'}, {name: 'laptop case', price: 15, category: 'accessories'}, {name: 'screen cleaner', price: 17, category: 'accessories'}, {name: 'laptop charger', price: 70, category: 'electronics'}, {name: 'mouse', price: 40, category: 'electronics'}, {name: 'earphones', price: 20, category: 'electronics'}, {name: 'monitor', price: 120, category: 'electronics'} ] } }); </script>
当然了，data中的数组对象，可以不用像上面这样定义也可以，我们可以从数据库导入，或者是利用ajax请求得到。这里只是为了演示v-for。
有时候我们可能会需要拿到商品在数组对象里的对应下标。我们可以用$index来获得。
//#1 <li v-for="el in products"> {{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }} </li> //#2 <li v-for="(index,el) in products"> {{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }} </li>
计算属性Computed
计算属性的应用场景，一般是在有一个变量的值需要其他变量计算得到的时候，会用到。
比如，例如用户在输入框输入一个数 x，则自动返回给用户这个数的平方 x²。你需要对输入框进行数据绑定，然后当数据修改的时候，就马上计算它的平方。
<div> 输入一个数字: <input type="text" v-model="value"> <p>计算结果：{{ square }}</p> </div>
<script> var V = new Vue({ el : '#vueInstance', data : { value : 1 }, computed : { square : function(){ return this.value * this.value; } } }); </script>计算属性定义数值是通过定义一系列的function，就像我们先前定义methods对象的时候是一样的。比如square方法是用来计算变量“square”的，其方法的返回值是两个this.value的乘积。
接下来可以用computed做一个复杂一点例子。系统会随机取一个1~10以内的数字，用户可以在输入框随机输入一个1~10之内的数字，如果刚好用户的输入和系统的随机数刚好匹配，则游戏成功，反之失败。
<div> 输入1~10内的数字: <input type="text" v-model="value"> <p>计算结果：{{ resultMsg }}</p> </div>
<script> var V = new Vue({ el : '#vueInstance', data : { value : null, randNum : 5//第一次随机数为5 }, methods : { getRandNum: function(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; } }, computed : { resultMsg : function(){ if (this.value == this.randNum) { this.randNum = this.getRandNum(1, 10); return '你猜对了!'; } else { this.randNum = this.getRandNum(1, 10); return '猜错了，再来!'; } } } }); </script>
后记
到此为止，你就已经能够掌握了Vue的基本使用，世界上最简洁最漂亮的框架之一，它的构建有着自己完整的设计思想，而且越来越流行。这个框架足够小而轻，在你的开发中会给你带来更加流畅的用户体验，并有效提高开发效率。上文中举了一系列例子，都掌握了吗？
您可能感兴趣的文章: