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

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

相关文章
【我的Android进阶之旅】解决Android Studio 运行gradle命令时报错: 错误: 编码GBK的不可映射字符
1、问题描述 最近在负责公司基础业务和移动基础设施的开发工作,正在负责Lint代码静态检查工作。因此编写了自定义的Lint规则,在调试过程中,编译的时候出现了如下所示的错误: 部分输出日志如下所示: :XTCLintrRules:compileJa...
1546 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4477 0
列表的简介 | Python从入门到精通:进阶篇之一
列表(List)是一种用于保存一系列有序项目的集合。类似于栈,项目的列表用[]括起来,创建的列表,可以添加、移除、搜索列表中的项目。
1138 0
zbm
ECS进阶训练营-DAY 5 打卡 搭建个人Leanote云笔记本
本场景将提供一台配置了CentOS 7.7的ECS实例(云服务器)。您可以参考本教程的操作基于已有的环境搭建一个Leanote云笔记本。
309 0
Spring MVC 函数式编程进阶
1. 前言 上一篇对 Spring MVC 的函数式接口编程进行了简单入门,让很多不知道的同学见识了这种新操作。也有反应这种看起来没有传统写法顺眼,其实大家都一样。但是我们还是要敢于尝试新事物。Java Lambada 刚出来也是被人各种吐槽,现在我在很多项目都见到了它的身影。好了转回正题,本文是对上一篇的延伸,我们继续对 Functional Endpoint 进行一些了解和运用。范式转换其实上一篇已经介绍差不多了,但是一旦你初次接触这种方式往往会面临新的问题。 2. 新的问题 在使用这种风格时我们也会遇到一些新的问题。接下来我们将通过举例来一步步解决这些问题。 2.1 如何异常处理 接
26 0
Python 进阶_OOP 面向对象编程_静态方法和类方法
目录 目录 静态方法 类方法 使用函数修饰符来声明静态方法和类方法 静态方法 静态方法仅是类中的函数, 不需要绑定实例, 也就是说静态方法的定义不需要传入 self 参数.
1032 0
Python 进阶_OOP 面向对象编程_self 的实例绑定
目录 目录 self 和绑定 调用非绑定的方法 self 和绑定 在 Python 中 self 变量是特殊的, 其用于在实例方法中引用该方法所绑定的实例, 换句话说就是 Python 在实例化对象时会自动的将实例对象传递到类体的 self 变量中, 类体中的 self 变量代表了该类的实例对象.
883 0
Spark学习之编程进阶——累加器与广播(5)
Spark学习之编程进阶——累加器与广播(5) 1. Spark中两种类型的共享变量:累加器(accumulator)与广播变量(broadcast variable)。累加器对信息进行聚合,而广播变量用来高效分发较大的对象。 2. 共享变量是一种可以在Spark任务中使用的特殊类型的变量。 3. 累加器的用法: 通过在驱动器中调用SparkContex
1332 0
3646
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载