转载自：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 1394 Minimum Inversion Number（最小逆序数/暴力 线段树 树状数组 归并排序）

    题目链接: 传送门 Minimum Inversion Number Time Limit: 1000MS     Memory Limit: 32768 K Description The inve ...

  2. PHP之：多图上传

    撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...

  3. Ubuntu学习总结-08 Ubuntu运行Shell脚本报 shell /bin/bash^M: bad interpreter错误问题解决

    错误原因之一很有可能是运行的脚本文件是DOS格式的, 即每一行的行尾以\r\n来标识, 其ASCII码分别是0x0D, 0x0A.可以有很多种办法看这个文件是DOS格式的还是UNIX格式的, 还是MA ...

  4. BZOJ3224 普通平衡树

    传送门: Treap 版本: //OJ 1999 //by Cydiater //2016.8.30 #include <iostream> #include <cstdio> ...

  5. jQuery小技巧

    1. 禁止右键点击 $(document).bind("contextmenu",function(e){ return false; }); 2.隐藏搜索文本框文字 $(docu ...

  6. Windows系统自带工具的 cmd 命令

    目标 与计算机高手无关,只是为了减少鼠标点击的次数,提高效率. 适用范围 Windows XP,Windows 7,Window 8 (在Windows 7 下验证通过.) 使用方法 在 “运行“ 对 ...

  7. 【原】整理的react相关的一些学习地址，包括 react-router、redux、webpack、flux

    因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...

  8. Oracle数据库的备份方法

    1.引言 Oracle数据库的备份方法很多,无论使用那种备份方法,备份的目的都是为了在出现故障后能够以尽可能小的时间和代价恢复系统.比如使用export实用程序导出数据库对象.使用Oracle备份数据 ...

  9. easyUI Form表单的密码验证是否相同

    一.js文件中的代码: $(function(){ $.extend($.fn.validatebox.defaults.rules, { equals: {//定义一个比较相等与否的函数 valid ...

  10. JavaWeb学习笔记——jsp:setproperty和getproperty