码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js学习笔记 第七篇 表单控件绑定

时间:2017-12-19 19:42:12      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:下拉框   学习笔记   搜索   多个   动态绑定   html   绑定   model   baidu   

本篇主要说明表单控件的数据绑定,这次没有新的知识点

文本框

1、普通文本框

<div id="app-1">
    <p><input v-model="textBox" placeholder="输入内容...">输入的内容:{{ textBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            textBox: ‘‘
        }
    })
</script>

2、数字文本框

<div id="app-1">
    <p><input v-model.number="numberTextBox" type="number" placeholder="输入内容..."> 输入的内容:{{ numberTextBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            numberTextBox: ‘‘
        }
    })
</script>

.number参数会强制把返回值转成Number类型,因为就算是type="number",返回的也是字符串型

3、多行输入框

<div id="app-1">
    <p><textarea v-model="multiTextBox" placeholder="输入内容..."></textarea></p>
    <p>输入的内容:</p>
    <p style="white-space:pre">{{ multiTextBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            multiTextBox: ‘‘
        }
    })
</script>

style="white-space:pre"表示空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签

复选框

1、单个复选框

<div id="app-1">
    <input type="checkbox" id="checkbox" v-model="singleCheckBox">
    <label for="checkbox">{{ singleCheckBox }}</label>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            singleCheckBox: false
        }
    })
</script>
</body>

2、定义属性单个复选框

<div id="app-1">
    <input type="checkbox" id="checkbox" v-model="customSingleCheckBox" v-bind:true-value="customTrue" v-bind:false-value="customFalse">
    <label for="checkbox">{{ customSingleCheckBox }}</label>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            customTrue: ,
            customFalse: ,
            customSingleCheckBox: 
        }
    })
</script>

v-bind:true-value设置为真时的属性,v-bind:false-value设置为假时的属性

3、多个复选框

<div id="app-1">
    <input type="checkbox" id="tansea" value="TanSea" v-model="multiCheckBox">
    <label for="tansea">TanSea</label>
    <input type="checkbox" id="google" value="Google" v-model="multiCheckBox">
    <label for="google">Google</label>
    <input type="checkbox" id="baidu" value="Baidu" v-model="multiCheckBox">
    <label for="baidu">Baidu</label>
    <p>选择的项:{{ multiCheckBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            multiCheckBox: []
        }
    })
</script>

单选框

<div id="app-1">
    <input type="radio" id="male" value="男" v-model="radioBox">
    <label for="male"></label>
    <input type="radio" id="female" value="女" v-model="radioBox">
    <label for="female"></label>
    <p>选择的项:{{ radioBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            radioBox: ‘‘
        }
    })
</script>

下拉框

1、普通下拉框

<div id="app-1">
    <select v-model="comboBox">
        <option disabled value="">请选择一项</option>
        <option></option>
        <option></option>
    </select>
    <p>选择的项:{{ comboBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            comboBox: ‘‘
        }
    })
</script>

2、动态绑定下拉框

<div id="app-1">
    <select v-model="dynamicComboBox">
        <option v-for="optionItem in optionItems" v-bind:value="optionItem.value">
            {{ optionItem.text }}
        </option>
    </select>
    <p>选择的项:{{ dynamicComboBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            dynamicComboBox: ‘‘,
                optionItems: [
                    { value: TanSea, text: 双子宫殿 },
                    { value: Google, text: 谷歌搜索 },
                    { value: Baidu, text: 百度搜索 }
                ]
        }
    })
</script>

3、多选列表

<div id="app-1">
    <p><select v-model="multiComboBox" multiple>
        <option>双子宫殿</option>
        <option>谷歌搜索</option>
        <option>百度搜索</option>
    </select></p>
    <p>选择的项:{{ multiComboBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: #app-1,
        data: {
            multiComboBox: []
        }
    })
</script>

 

Vue.js学习笔记 第七篇 表单控件绑定

标签:下拉框   学习笔记   搜索   多个   动态绑定   html   绑定   model   baidu   

原文地址:http://www.cnblogs.com/TanSea/p/Vue-Chapter7-Form.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!