Vue绑定数据那些事

原创
2018/04/17 15:52
阅读数 182

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';
}

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部