• vue.js框架自学笔记(1)---小的调查问卷


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <!--text-->
        <input type="text" v-model="message">
        <br>
        <br>
        <!--radio-->
        <label><input type="radio" value="male" v-model="gender"></label>
        <label><input type="radio" value="female" v-model="gender"></label>
        <br>
        <br>
        <!--checkbox-->
        <label><input type="checkbox"  v-model="checked">已婚</label>
        <br>
        <!--多个勾选框-->
        <br>
        <label>属于第几类人员<input type="checkbox" value="1" v-model="multiChecked">1</label>
        <label><input type="checkbox" value="2" v-model="multiChecked">2</label>
        <label><input type="checkbox" value="3" v-model="multiChecked">3</label>
        <br>
        <!--select-->
        <br>
        <select v-model="selected">
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <br>
        <select v-model="multiSelected" multiple>
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <br>
        <button v-on:click="reverseMessage">反转字符串</button>
        <p>-------------------<p>
        <span>R姓名:{{r_message}}</span>
        <p>姓名:{{message}}</p>
        <p>{{gender}}</p>
        <span>已婚:{{checked}}</span>
        <p>第[ {{multiChecked.join('')}} ]类人员</p>
        <span>选择你的目标成绩: {{selected}}</span>
        <br>
        <br>
        <span>实际成绩:{{multiSelected.join('|')}}</span>
    </div>
        
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:'',
                gender:'',
                checked:'',
                multiChecked:[],
                selected:'',
                multiSelected:[],
                a:'checked',
                b:'checked',
                r_message:'',
            },
            methods: {
                reverseMessage: function () {
                    this.r_message = this.message.split('').reverse().join('')
                }
            }
    
        });
    </script>
    </body>

    参考 https://blog.csdn.net/moses_binson/article/details/88688621 的文章

  • 相关阅读:
    alpine python3中使用mysql报错ModuleNotFoundError: No module named 'MySQLdb'
    Galera集群部署
    Kibana did not load properly.Check the server output for more information。
    zabbix-server迁移
    traefik使用etcd存储配置
    Rancher2.4搭建单机版rabbitmq
    ngx_http_upstream_module模块说明
    【说明】
    运维日常集合(个人向 坚持更新)
    Linux监控-历史细项数据回溯
  • 原文地址:https://www.cnblogs.com/cptCarlvon/p/12606352.html
Copyright © 2020-2023  润新知