脚本语言 订阅所有【脚本语言】的日志

Vue表单双向绑定和取值示例

编辑:dnawo 日期:2022-03-21

字体大小: 小 中 大


表单在HTML页面很常见，下边我们看下Vue表单数据绑定和取值：

1).text - 单行文本
复制内容到剪贴板程序代码 程序代码
<div id="example">
    <input type="text" v-model="result">
    <p>Result: {{result}}</p>
</div>

<script>
    new Vue({
        el: '#example',            
        data: {
            result: '' //string
        }
    })
</script>

2).textarea - 多行文本
复制内容到剪贴板程序代码 程序代码
<div id="example">
    <textarea v-model="result"></textarea>
    <p>Result: {{result}}</p>
</div>

<script>
    new Vue({
        el: '#example',            
        data: {
            result: '' //string
        }
    })
</script>

3).radio - 单选按钮
复制内容到剪贴板程序代码 程序代码
<div id="example">
    <input type="radio" value="A" v-model="result">
    <label for="A">A</label>
    <input type="radio" value="B" v-model="result">
    <label for="B">B</label>
    <input type="radio" value="C" v-model="result">
    <label for="C">C</label>
    <p>Result: {{result}}</p>
</div>

<script>
    new Vue({
        el: '#example',            
        data: {
            result: '' //string
        }
    })
</script>

4).checkbox - 复选框(单选)
复制内容到剪贴板程序代码 程序代码
<div id="example">
    <input type="checkbox" v-model="result">
    <label for="checkbox">agree</label>
    <p>Result: {{result}}</p>
</div>

<script>
    new Vue({
        el: '#example',            
        data: {
            result: false //boolean
        }
    })
</script>

5).checkbox - 复选框(多选)
复制内容到剪贴板程序代码 程序代码
<div id="example">
    <input type="checkbox" value="A" v-model="result">
    <label for="A">A</label>
    <input type="checkbox" value="B" v-model="result">
    <label for="B">B</label>
    <input type="checkbox" value="C" v-model="result">
    <label for="C">C</label>
    <p>Result: {{result}}</p>
</div>

<script>
    new Vue({
        el: '#example',            
        data: {
            result: [] //array
        }
    })
</script>

6).select - 下拉列表(单选)
复制内容到剪贴板程序代码 程序代码
<div id="example">
    <select v-model="result">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>Result: {{result}}</p>
</div>

<script>
    new Vue({
        el: '#example',            
        data: {
            result: '' //string
        }
    })
</script>

7).select - 下拉列表(多选)
复制内容到剪贴板程序代码 程序代码
<div id="example">
    <select multiple v-model="result">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>Result: {{result}}</p>
</div>

<script>
    new Vue({
        el: '#example',            
        data: {
            result: [] //array
        }
    })
</script>

参考资料

[1].Vue表单输入绑定：https://cn.vuejs.org/v2/guide/forms.html

上一篇: Vue框架data和computed两种属性的区别
下一篇: ECMAScript和Javascript的区别与关系
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 1759
发表评论
请登录后再发表评论！