vue.js For循环，vue.js v-for使用
================================
©Copyright 蕃薯耀 2018年11月28日
http://fanshuyao.iteye.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue For循环</title>
</head>
<body>
<div id="forDiv">
<ul>
<li v-for="obj in persons">{{obj.name}}[{{obj.age}}]</li>
</ul>
<ul>
<li v-for="(obj, index) in persons">
{{index}}、{{obj.name}}[{{obj.age}}]
----<input type="button" @click="deleteBy(index)" value="删除"/>
----<input type="button" @click="updateBy(index, index)" value="属性更新"/>
----<input type="button" @click="updateByObj(index)" value="对象更新"/>
</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#forDiv",
data: {
persons: [
{name: "张三", age : 18},
{name: "李四", age : 19},
{name: "王五", age : 17}
]
},
methods: {
deleteBy : function(index){
//splice() 方法从数组中添加/删除项目，然后返回被删除的项目。
//arrayObject.splice(index,howmany,item1,.....,itemX)
//index： 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//howmany : 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
//item1,.....,itemX : 可选。向数组添加的新项目。
this.persons.splice(index, 1);
},
updateBy : function(index, index){
this.persons[index].name=this.persons[index].name + index + "";
},
updateByObj : function(index){
//this.persons[index] = {name: '马六', age : 20};//这样不能直接改变页面显示的值
this.persons.splice(index, 1, {name: '马六', age : 20});//这样使用
//Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
//push() 向数组的末尾添加一个或更多元素，并返回新的长度。
//pop() 删除并返回数组的最后一个元素
//shift() 删除并返回数组的第一个元素
//unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
//splice() 删除元素，并向数组添加新元素。
//sort() 对数组的元素进行排序
//reverse() 颠倒数组中元素的顺序。
}
}
});
</script>
</body>
</html>
================================
©Copyright 蕃薯耀 2018年11月28日
http://fanshuyao.iteye.com/
相关推荐
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
例如，`v-if`用于条件渲染，`v-for`用于循环遍历，`v-bind`用于动态绑定属性，`v-on`用于事件监听。 3. 组件化：Vue.js 强调组件化开发，每个组件都是一个独立的可复用的单元，有自己的视图和数据逻辑。组件可以...
Vue.js是一种流行的、开源的JavaScript框架，用于构建用户界面，特别是在单页面应用程序（SPA）中。Vue.js的设计理念是简洁、灵活，同时提供强大的功能，让开发者能够更高效地构建可维护的前端应用。这份“Vue.js...
3. **指令**：Vue.js提供了一系列预定义的指令，如`v-if`（条件渲染）、`v-for`（循环）、`v-bind`（属性绑定）等，这些指令简化了DOM操作。 4. **计算属性与侦听器**：计算属性用于根据其他数据计算值，而侦听器则...
3. **指令和过滤器**：Vue中的指令如v-if、v-for、v-bind和v-on，提供了在模板中执行逻辑的功能。过滤器则用于数据转换，如日期格式化或字符串处理。 4. **生命周期钩子**：Vue组件有多个生命周期钩子函数，如...
4. **指令**：Vue.js提供了一系列指令，如`v-if`（条件渲染）、`v-for`（循环渲染）、`v-on`（事件监听）等，它们扩展了HTML的功能。 5. **组件化**：Vue.js的组件系统是其强大之处，组件可以看作是可复用的独立...
2. **指令系统**：Vue.js提供了丰富的指令，如`v-if`（条件渲染）、`v-for`（循环遍历）、`v-model`（双向数据绑定）等，它们帮助开发者以声明式的方式处理DOM操作。 3. **组件化**：Vue.js中的组件是可复用的代码...
Vue还支持条件渲染（v-if/v-else）、循环渲染（v-for）和指令组合使用。 四、计算属性 计算属性是基于其依赖的数据动态计算的结果，可以避免在模板中编写复杂的逻辑。它们在依赖变化时自动更新，提供了一种更易读、...
比如，`v-model`指令允许双向数据绑定，`v-if`和`v-for`用于条件渲染和循环，而组件系统则能实现代码复用和模块化。 Vue-resource.js 使用示例可能如下： ```javascript import Vue from 'vue' import VueResource ...
Vue.js是一种渐进式JavaScript框架，主要用于构建用户界面。它是由尤雨溪创建，并且是目前前端开发中非常流行的技术之一。Vue.js的面试题涉及到多个方面，包括路由管理、状态管理、组件通信、指令使用等，这些都是...
- **条件渲染与循环渲染**：使用`v-if`和`v-for`控制元素的显示和遍历数组或对象。 3. **项目实战**： - **脚手架搭建**：使用`vue-cli`快速初始化项目，配置Webpack等工具。 - **路由管理**：借助`vue-router`...
3. **指令系统**：Vue.js 提供了一系列内置指令，如v-if/v-else用于条件渲染，v-for用于循环遍历，v-bind/v-on用于数据绑定和事件处理，这些指令极大地简化了DOM操作。 4. **数据绑定**：Vue.js 使用双向数据绑定...
需要注意的是，Vue.js中每个v-for循环的数组元素本身也可以包含一个v-for循环，以此达到嵌套遍历的目的。 在文档中提及的示例代码中，我们看到父列表parentList包含多个子列表childList，每个子列表中包含有多个...
4. **指令系统**：如v-if、v-for等，它们是Vue.js中的特殊属性，用来处理条件、循环等逻辑。 5. **计算属性和侦听器**：用于响应式地处理复杂逻辑和监听数据变化。 6. **路由管理**：Vue Router 是Vue.js的官方路由...
4. **指令**：Vue.js的指令如`v-if`、`v-for`在模板中用于控制DOM的显示和循环渲染。在轮播图中，`v-if`可以用来控制导航箭头的显示状态，`v-for`则用于遍历图片列表。 5. **方法与事件**：在轮播图组件中，我们...
Vue.js是一款轻量级且易于学习的JavaScript库，专注于构建数据驱动的Web界面。它的设计目标是通过简洁的API实现响应式数据绑定和组件化的视图。 **3.2 Vue.js与其他框架的区别** - **灵活性**：Vue.js主要关注视图...
9. **条件与循环指令**：`v-if`和`v-show`用于条件渲染，而`v-for`用于循环渲染。查看源代码中这些指令的实例，理解它们在实际场景中的应用。 10. **事件处理**：Vue使用`v-on`指令来绑定事件监听器，可以简写为`@`...
例如，你可以使用`v-if`和`v-for`指令来控制元素的显示和循环遍历数据。 其次，Vue.js具有组件化系统。组件可以看作是可复用的UI部件，它们有自己的视图和数据。组件间可以通过props进行通信，并利用自定义事件进行...