转载自：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. 树状数组求第k小的元素

    int find_kth(int k) { int ans = 0,cnt = 0; for (int i = 20;i >= 0;i--) //这里的20适当的取值,与MAX_VAL有关,一般 ...

  2. UVa 11889 Benefit（数论）

    题目链接: 传送门 Benefit Time Limit: 5000MS     Memory Limit: 32768 KB Description Recently Yaghoub is play ...

  3. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  4. 从Paxos到ZooKeeper-四、ZooKeeper技术内幕

    本文将从系统模型.序列化与协议.客户端工作原理.会话.服务端工作原理以及数据存储等方面来揭示ZooKeeper的技术内幕. 一.系统模型 1.1 数据模型 ZooKeeper的视图结构使用了其特有的& ...

  5. SQL Server编程（02）自定义函数

    在编程过程中,我们通常把特定的功能语句块封装称函数,方便代码的重用.我们可以在SQL Server中自定义函数,根据函数返回值的区别,我们自定义的函数分两种:标量值函数和表值函数. 自定义函数的优点: ...

  6. MySQL中的外键是什么、有什么作用

    本文参加博文大赛,如果您满意的话麻烦点击这里给我投票原,查看原文点击这里.最近自学数据库MySQL,然后有个疑问,一直不得其解,查询了相关资料,最后还是没有解决. 我的疑问是 "使用外键约束 ...

  7. PHP_php.ini_说明详解

    这个文件必须命名为''php.ini''并放置在httpd.conf中的PHPIniDir指令指定的目录中.最新版本的php.ini可以在下面两个位置查看:http://cvs.php.net/vie ...

  8. IIS7/IIS7.5中目录执行权限的设置方法

    我们在建站的时候,通常有些目录必须给写入权限,这个时候这些目录就很可能被人写入脚本文件,为了将安全性维护得更好,我们可以关闭这些有写入权限的目录的脚本执行权限.IIS6的时候,我们很容易找到关闭的地方 ...

  9. ASP.NET技巧：教你制做Web实时进度条

    网上已经有很多Web进度条的例子,但是很多都是估算时间,不能正真反应任务的真实进度.我自己结合多线程和ShowModalDialog制做了 一个实时进度条,原理很简单:使用线程开始长时间的任务,定义一 ...

  10. SignalR 资料

    链接:http://www.cnblogs.com/royding/p/3919134.html