select 动态 绑定 vue. js

< select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </ select > Selected: {{ selected }} 只要保证data里面有个options

JS 实现双向 数据 绑定

1倍，mvvm模式的一个核心便是 数据 的双向 绑定 。 什么是 数据 的双向 绑定 ？ 双向 数据 绑定 上面说的是在vue框架中 数据 双向 绑定 的应用，个人认为这个特性很赞，是大幅提升开发效率的关键，那如果脱离mvvm的框架，我也想实现这种 数据 的双向 绑定 ，可不可以实现了，该如何实现了？ 用原生 js 模拟 数据 双向 绑定 为了实现这个功能我们需要用到 js 的一个方法Object.defineProperty 1. 属性介绍 2. 方法介绍 大概的介绍了defineProperty核心的两个方法，看到这里，你就知道可以利用这两个内置方法搞事情了，看下面利用该方法实现 数据 双向 绑定 的一个例子 ?

js 双向 绑定 数据

let aaa = []; let bbb = [1,2,3]; let ccc = [0,9,8]; aaa = bbb; //此时aaa与bbb被 绑定 (aaa指向bbb的指向) ,若使用push则不会 绑定

JS 原生 数据 绑定 原理

用过vue的人都知道，vue有一个特别好用的 数据 绑定 ，只要 绑定 了，你只要改变了这个 数据 ，页面也会跟着渲染。其实原生的 JS 也是可以做到的，vue其实就是用了原生的原理。 Object.defineProperty，语法是Object.defineProperty(obj, prop, descriptor) obj:就是一个对象; prop:就是你要监听的obj里面的某个 数据 "hello", configurable:false console.log(obj.val); //输出hello 现在说说最重要的getter和setter方法， 数据 绑定 的主要方法 就像obj.hello = 999;那么页面的值就会是999；感兴趣的可以复制代码的方法，一个一个方法调用，就很容易明白原生 JS 的双向 绑定 。

Select 下拉框使用ajax异步 绑定 数据

-- 绑定 的下拉框-->

商品名称：

vue学习：使用v-for向 select 组件 绑定 数据

做质量看板时，有个需求是从接口获取一些项目 数据 ，然后需要把这些 数据 塞到下拉框组件中 本篇记录下如何利用v-for遍历接口返回的 数据 后端返回的 数据 格式如下 'id': 1, 'name': 'name': '冲刺12', 'state': 'closed' 我需要把name字段取出来，回显到下拉框中，效果如下 image.png 很明显，这里前端需要用v-for来处理这些 数据 假如我用一个参数来接收后端返回的list，参数名为sprints html代码如下 选择冲刺： <el- select -- 使用v-bind 绑定 遍历的值，:label为v-bind的语法糖 v-bind:label="i.name" --> </el- select >