Vue进阶之表单控件绑定-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Vue进阶之表单控件绑定

简介:

1.单行input

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test-vuejs</title>
</head>
<body>
<div id="example">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
</div>
<script src="./js/vue/vue.js"></script>

<script>
    var example = new Vue({
        el: '#example',
        data:{
            message: ''
        }
    })


</script>
</body>
</html>

2.多行

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test-vuejs</title>
</head>
<body>
<div id="example">
    <span>Multiline message is:</span>
    <p style="white-space: pre">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script src="./js/vue/vue.js"></script>

<script>
    var example = new Vue({
        el: '#example',
        data:{
            message: ''
        }
    })


</script>
</body>
</html>

3.单选框

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test-vuejs</title>
</head>
<body>
<div id="example">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
</div>
<script src="./js/vue/vue.js"></script>

<script>
    var example = new Vue({
        el: '#example',
        data:{
            checked: ''
        }
    })


</script>
</body>
</html>

4.复选框

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test-vuejs</title>
</head>
<body>
<div id="example">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>
<script src="./js/vue/vue.js"></script>

<script>
    var example = new Vue({
        el: '#example',
        data:{
            checkedNames: []
        }
    })


</script>
</body>
</html>

422101-20170217153916472-509649231.png

5.单选按钮

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test-vuejs</title>
</head>
<body>
<div id="example">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>
<script src="./js/vue/vue.js"></script>

<script>
    var example = new Vue({
        el: '#example',
        data:{
            picked: ''
        }
    })


</script>
</body>
</html>

422101-20170217154513566-996515645.gif

6.选择列表

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test-vuejs</title>
</head>
<body>
<div id="example">
    <select v-model="selected">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script src="./js/vue/vue.js"></script>

<script>
    var example = new Vue({
        el: '#example',
        data:{
            selected: ''
        }
    })


</script>
</body>
</html>

422101-20170217154749441-1309875882.gif

7.多选

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test-vuejs</title>
</head>
<body>
<div id="example">
    <select v-model="selected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
</div>
<script src="./js/vue/vue.js"></script>

<script>
    var example = new Vue({
        el: '#example',
        data:{
            selected: []
        }
    })


</script>
</body>
</html>

422101-20170217155048879-1116956549.gif

8.动态选项

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test-vuejs</title>
</head>
<body>
<div id="example">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script src="./js/vue/vue.js"></script>

<script>
    var example = new Vue({
        el: '#example',
        data:{
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    })


</script>
</body>
</html>

422101-20170217155655957-484899109.gif

方法论:gif截图很有意思 GifCam
422101-20170217160140285-671542700.png



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6410294.html如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: