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,如需转载请自行联系原作者

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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10062 0
【我的Android进阶之旅】解决Android Studio 运行gradle命令时报错: 错误: 编码GBK的不可映射字符
1、问题描述 最近在负责公司基础业务和移动基础设施的开发工作,正在负责Lint代码静态检查工作。因此编写了自定义的Lint规则,在调试过程中,编译的时候出现了如下所示的错误: 部分输出日志如下所示: :XTCLintrRules:compileJa...
1560 0
从高频笔/面试题思考Android学习/进阶路线(Java篇)
写在前面 标题谈进阶,属实有一些夸大。 我一直在思考什么样的文章才是一篇好文章,我的定义是首先要有人看,其次重要的是内部有价值。所以针对于这个出发点,我决定从大家比较关注的面试题入手,然后尝试从中分析对Android进阶路线的帮助。
1728 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10882 0
snk
Angular vs React vs Vue vs UISYS 的事件绑定方式对比(新手必看)
web三大框架和 airoot uisys 都给大家介绍了一番。在事件绑定上都很棒,除了angluar 有些小伙伴会疑问,angluar为啥那么复杂,其实 angluar 设计之初就为大型企业项目考虑了很多,而且他的组件是最成熟的,React 和 Vue 毕竟不是做成google 那么复杂,所以angluar开始学的时候,感觉有点“脱裤子放屁的感觉”,但是你学深入了,你就明白作者的困境了。
1082 0
《C语言程序设计进阶教程》一1.1 编译
本文讲的是C语言程序设计进阶教程一1.1 编译,本节书摘来华章计算机《C语言程序设计进阶教程》一书中的第1章,第1.1节, Intermediate C Programming[美] 陆永祥(Yung-Hsiang Lu) 著 徐东 译 译更多章节内容可以访问云栖社区“华章计算机”公众号查看。
2140 0
zbm
ECS进阶训练营-DAY 5 打卡 搭建个人Leanote云笔记本
本场景将提供一台配置了CentOS 7.7的ECS实例(云服务器)。您可以参考本教程的操作基于已有的环境搭建一个Leanote云笔记本。
366 0
【青训营】- TypeScript进阶笔记
【青训营】- TypeScript进阶笔记
10 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13875 0
4269
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载