当然了，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的基本使用，世界上最简洁最漂亮的框架之一，它的构建有着自己完整的设计思想，而且越来越流行。这个框架足够小而轻，在你的开发中会给你带来更加流畅的用户体验，并有效提高开发效率。上文中举了一系列例子，都掌握了吗？
利用new Vue()创建一个新的Vue实例，并设置挂载点
利用v-model指令对表单控件进行双向绑定
了解 $data , {{}} , $index 在输出数据时的用法
利用v-on进行事件绑定，methods的用法
结合v-on，利用v-if或者v-show进行条件判定，并了解区别
利用v-for循环输出列表
计算属性Computed的基本应用
现在你已经基本掌握了Vue的基础。接下来你要做的就是多看看Vue的一些最新时讯，或者跟我继续了解Vue的旅程。
github地址:https://github.com/AppianZ/Close2Vue
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: