js foreach 跳出循环_VUE.js

Vue.js模板语法

vue.js使用了基于HTML的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据，其核心就是一个允许开发者采用简洁的模板语法来将数据渲染进DOM系统。使用各种组件来做成一个项目的话，需要结合单页应用。

插值

数据绑定最常见的形式就是使用{{.....}}的文本插值（插值表达式）：

<div id = 'app'>
  <p>{{ message }}</p>
</div>

使用 v-html 指令用于输出 html 代码：

<

属性

HTML属性中的值应用使用v-bind指令来绑定

例子：

<

Vue.js条件与循环

v-if

v-else

v-else-if

指令是带有v-前缀的特殊属性，用于在表达式的值改变时，将某些行为应用于DOM环境中，例如：

<

注：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

用户输入

<

v-model：用在input、select、textarea、CheckBox等，比如信息表、登录界面、验证信息等

循环语句

循环遍历使用v-for语句，绑定一个数据列表到数组从而进行遍历

同样也可以进行多重循环，只要分清楚数据中的父级id和子级id进行遍历循环，在循环遍历的时候，记住外循环一次内循环一圈就可以了

例如：

<

当然在使用v-for的时候可以添加第二个参数第三个参数等，作为键名、索引等，先前做的vue项目中，使用element组件库中的tree组件时就使用了v-for的三重循环，通过遍历数组来获取数据库中的数据;

<

还有foreach循环，在使用foreach时建议使用箭头函数来一起搭配使用

例如：

f1.forEach(iteam1 => {
  iteam1.children.forEach(iteam2=>{
    iteam2.children.forEach(iteam3=>{
      this.checkedKeys.push(iteam3.id);
    })
  })
});

Vue.js组件

组件（Component）是 Vue.js 最强大的功能之一，可以扩展到HTML元素中，也可以对重复使用的代码句进行封装（vue插件）在组建中引用，组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树；

我们可以定义一个全局组件也可以根据特定的情况来创建一个局部组件

全局组件

例：

<

局部组件

<

写到组件就需要写一下组建中一个比较重要的属性Prop（是父级组件用来传递数据的一个自定义属性），props，父级组件中的数据通过props将数据传给子组件，在子组件中需要显示的用props选项声明prop；