转载自：http://blog.csdn.net/violetjack0808/article/details/51451672

<!DOCTYPE html>

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>

    <meta charset="UTF-8">

    <title>index</title>

    <script src="vue.min.js"></script>

</head>

<body>

    <div id="app">

        <h2>学生信息登记</h2>

        <br>

        <div>

            <label>姓名：</label>

            <input type="text" placeholder="请输入姓名" v-model="name">

        </div>

        <div>

            <label>性别：</label>

            <input id="sex01" type="radio" value="1" v-model="sex">

            <label for="sex01">男</label>

            <input id="sex02" type="radio" value="2" v-model="sex">

            <label for="sex02">女</label>

        </div>

        <div>

            <label>年龄：</label>

            <select v-model="age">

                <option selected>18</option>

                <option>19</option>

                <option>20</option>

                <option>21</option>

            </select>

        </div>

        <div>

            <label>党员：</label>

            <input type="checkbox" v-model="member">

        </div>

        <br>

        <button id="btnCommit" v-on:click="commit">提交</button>

        <button id="btnReset" v-on:click="reset">重置</button>

        <br>

        <br>

        <label>{{ result }}</label>

    </div>

    <script>

        new Vue({

            el: '#app',

            data: {

                name: '',

                sex: '',

                age: '',

                member: '',

                result: ''

            },

            ready: function () {

                alert("加载完成");

            },

            methods: {

                commit: function () {

                    var name = this.name;

                    var sex = '';

                    if (this.sex == 1){

                        sex = '男';

                    }else if (this.sex == 2){

                        sex = '女';

                    }

                    var age = this.age;

                    var member = '';

                    if (this.member){

                        member = '党员';

                    } else {

                        member = '非党员';

                    }

                    var result = name + ' ' + sex + ' ' + age + ' ' + member;

                    this.result = result;

                },

                reset: function () {

                    this.result = '';

                }

            },

            watch: {

                'sex': function (val, oldVal) {

                    console.log('oldVal = ' + oldVal + ' val = ' + val);

                }

            }

        });

    </script>

</body>

</html>

vue.js 简单入门的更多相关文章

  1. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  2. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  3. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

  4. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  5. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  6. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  7. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  8. Vue的理解：Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  9. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

随机推荐

  1. HDU5671Matrix（矩阵行列交换）

    有一个nn行mm列的矩阵(1 \leq n \leq 1000 ,1 \leq m \leq 1000 )(1≤n≤1000,1≤m≤1000),在这个矩阵上进行qq (1 \leq q \leq 1 ...

  2. 通过命令行连接Wifi

    前提:无线网卡驱动正常安装 1.检查连接无线的接口 $ iwconfig 一般无线接口为wlan0 2.检查无线接口是否工作 $ sudo ip link set wlan0 up 3.扫描周围无线网 ...

  3. CSS 中如何把 Span 标签设置为固定宽度

    一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:blo ...

  4. IBatis分页显示

    <select id="pagedListOrderOpen"> SELECT * FROM ( </select> <sql id="pa ...

  5. 解决git pull 命令失效，不能从远程服务器上拉取代码问题

    用时候在用Git pull命令的时候不管用,拉取不下来远程分支上的代码,是因为本地分支和远程分支没有建立关联. 处理这种问题很简单就按照提示执行命令即可:git branch --set-upstre ...

  6. llinux 查看自己的公网ip

    如何在LINUX服务器下查看公网IP地址,可以使用下面的方法: [root@web ~]#curl http://members.3322.org/dyndns/getip [root@web ~]# ...

  7. win7下exe提示无法正常启动（0xc0000906）

    本人遇见是 avast问题,卸了

  8. Java——按钮组件：JButton

    import java.awt.Color; import java.awt.Dimension; import java.awt.Font; import java.awt.Point; impor ...

  9. Swift学习二

    // 定义枚举方式一 enum Season { // 每个case定义一个实例 case Spring case Summer case Fall case Winter } // 定义枚举方式二 ...

  10. RHEL本地yum源

    一.挂载本地镜像做yum源(环境:RHEL6.5 64位 VM11) 1.进入/etc/yum.repos.d目录, [root@localhost yum.repos.d]# ls packagek ...