vue 表单控件与绑定(七)

栏目: 编程语言 · 发布时间: 6年前

<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>

1.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" ,返回的也是字符串型

1.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> 标签

二、复选框

2.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>

2.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 设置为假时的属性

2.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>

三、下拉框

3.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>

3.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.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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Spring Into HTML and CSS

Spring Into HTML and CSS

Molly E. Holzschlag / Addison-Wesley Professional / 2005-5-2 / USD 34.99

The fastest route to true HTML/CSS mastery! Need to build a web site? Or update one? Or just create some effective new web content? Maybe you just need to update your skills, do the job better. Welco......一起来看看 《Spring Into HTML and CSS》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具