转载自：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. oracle修改表字段名时报错：ORA-00054:资源正忙,但指定以NOWAIT方式获取资源,或者超时失效的问题

    打开sql plus select session_id from v$locked_object;查询出oracle锁定的会话ID SELECT sid, serial#, username, os ...

  2. 《JavaScript权威指南》学习笔记 第二天 下好一盘大棋

    前段学习js的时候总是零零散散的,以至于很多东西都模棱两可.时间稍微一久,就容易忘记.最主要的原因是这些东西,原来学的时候就不是太懂,以至于和其他知识无法形成记忆链,所以孤零零的知识特别容易忘记.重温 ...

  3. C++ Virtual

    摘自:http://www.cnblogs.com/xd502djj/archive/2010/09/22/1832912.html namespace QCAR { /// Area is the ...

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

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

  5. BZOJ4590: [Shoi2015]自动刷题机

    显然看着就是二分,仔细看的话显然刷的题数随n增大单调不升. 挂了一发是因为无解输出一个-1而不是两个…… #include<cstdio> #include<algorithm> ...

  6. 面试题目——《剑指Offer》

    1.把一个字符串转换成整数——<剑指Offer>P29 2.求链表中的倒数第k个结点——<剑指Offer>P30 3.实现Singleton模式——<剑指Offer> ...

  7. thinkphp 3.2.3 连接sql server 2014 WAMPSERVER环境包

    安装 sqlsrv 扩展 首先  sql server 2014 安装没啥说的 链接信息自己设置 php 版本 :5.5.12 sqlsrv 驱动  微软提供了 3.0 和3.1 版本  3.0 对应 ...

  8. Python开发【第十八篇】：MySQL（二）

    视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...

  9. JSTL I18N 格式标签库

    <%@ page language="java" pageEncoding="gbk"%> <%@ taglib prefix="c ...

  10. iwebshop二次开发

    1.iwebshop中写hello world ① 动作action方式 controllers目录下,然后创建text.php. <?php class Test extends IContr ...