vue.js 简单入门

转载自：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>

 

posted @ 2016-08-18 09:51  cogitoergosum  阅读(156)  评论(0)  编辑  收藏  举报