文档章节

Vue绑定数据那些事

wftt
 wftt
发布于 2018/04/17 15:52
字数 402
阅读 73
收藏 0

1、input:type="text"的绑定

在input中写入v-model="..",在data中定义一下,就实现了数据绑定,很容易吧!textarea用法类似。

<template>
   <label>博客标题</label>
   <input type="text" v-model="blog.title" required />
</template>

export default {
  name: 'add-blog',
  data () {
    return {
      blog:{
        title:"",
      }
    }
  }
}

2、input:type="checkbox"的绑定

如果有多个选项需要选择,当然是希望选择完哪个之后可以显示我们所选的内容。那么这个怎么实现呢?看下面代码,有4个checkbox选项,在每一个input后面添加一个数据绑定,绑定的内容是一个数组,也需要事先在data中定义一下,为什么使用数组呢?因为选择不是单一的,我们希望选择的都可以显示出来,那么就使用数组存起来。

<div id="checkboxes">
     <label>Vue.js</label>
     <input type="checkbox" value="Vue.js" v-model="blog.categories">
     <label>Node.js</label>
     <input type="checkbox" value="Node.js" v-model="blog.categories">
     <label>React.js</label>
     <input type="checkbox" value="React.js" v-model="blog.categories">
     <label>Angular4.js</label>
     <input type="checkbox" value="Angular4.js" v-model="blog.categories">
</div>

export default {
  name: 'add-blog',
  data () {
    return {
      blog:{
        categories:[]
      }
    }
  }
}

3、select下拉选择的绑定

下拉选择某个后,希望显示的是自己所选的内容,需要在select上绑定,然后option遍历数组取值。

<label>作者:</label>
<select v-model="blog.author">
    <option v-for="author in authors">{{author}}</option>
</select>

export default {
  name: 'add-blog',
  data () {
    return {
      blog:{
        author:""
      },
      authors:["tt","wf","ll"]
    }
  }
}

以上代码的效果一开始的时候下拉框是空的,只有点击下拉箭头才会出现内容。如何显示一个默认值呢?如下,只需要加一个钩子函数,赋一个初始值保持默认状态。

created(){
    this.blog.author = 'tt';
}

 

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
关于Vue和React区别的一些笔记

这篇文章记录我在使用Vue和React的时候,对他们的不同之处的一些思考,不仅局限于他们本身,也会包括比如 等经常搭配使用的工具。因为涉及到的内容很多,可能下面的每一个点都能写成一篇文章...

言川
2018/07/30
0
0
在 WebStorm 中以 Vue.js 构建应用入门

Vue.js 即“渐进式 JavaScript 框架”,是用于构建丰富且迅速响应的 Web 应用程序的用户接口框架。虽然 Vue 着重于 UI (即视图),但它也能够插入其他库和工具来适用于其他场景,例如访问后...

JetBrains
06/20
0
0
Vue + ElementUI 后台管理系统项目心得(二)

此篇是关于 Vue 的总结。Js 的总结请见前一篇:Vue + ElementUI 后台管理系统项目心得(一) 话说过完年回来,仿佛一夜之间身边的人都在谈论 Vue,相关的组件也如雨后春笋一般涌现出来,比如...

OSIMLY
2017/03/27
0
0
小白教程|一小时上手最流行的前端框架vue

前言 vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架。相比angular和react,vue更加轻巧、高性能、也很容易上手。大家也可以移步vue...

全栈社区
04/08
0
0
说说 Vue.js 的指令与事件

指令(Directives)带有前缀 ,比如 v-if、v-html、v-pre 等。指令的作用是当表达式的值改变时,相应地将某些行为应用到 DOM 上,我们以 v-if 为例: html: js: 这个例子中,当数据 show 的...

deniro
2018/10/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部