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 @   cogitoergosum  阅读(159)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手