转载自：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. HDU 1754 I Hate It(线段树模板题）

    题目链接: 传送门 I Hate It Time Limit: 3000MS     Memory Limit: 32768 K Description 很多学校流行一种比较的习惯.老师们很喜欢询问, ...

  2. 修改MySQL的默认数据存储引擎

    因为MySQL默认的是MyISAM数据引擎,不支持事务也不支持外键,所以需要用到Innodb引擎,于是决定将mysql的默认引擎设置为innodb.1 . 查看MySQL存储引擎是用的哪个?登录MyS ...

  3. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  4. SQL Server Transact-SQL 编程

    T-SQL语句用于管理SQL Server数据库引擎实例,创建和管理数据库对象,以及查询.插入.修改和删除数据. Ø 变量 . 局部变量(Local Variable) 局部变量是用户可以自定义的变量 ...

  5. winform的tab跳到下一个

    先设置TabStop=true,再设置TabIndex的顺序

  6. ORACLE函数大全

    SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数; SQL> select ascii('A') A,ascii('a') a,ascii('0') zero,ascii(' ...

  7. Java可变参数传递中可以接收多个对象

  8. （转）深入理解Java中的final关键字

    转自:http://www.importnew.com/7553.html Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方 ...

  9. Brew Command Not Found

    安装了brew后,居然找不到brew命令.于是uninstall后再次install,居然还是Brew Command Not Found. 解决办法: http://stackoverflow.co ...

  10. localdb

    <connectionStrings> - <add name="default" connectionString="Data Source=.; I ...