zoukankan      html  css  js  c++  java
  • vue表单属性

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .div1{
                    width: 300px;
                    height: 300px;
                    margin: 0 auto;
                    background: skyblue;
                }
            </style>
            <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="app">
                <h2>输入框</h2>
                <input type="text" v-model='inputText' name="" id="" value="" />
                <p>{{inputText}}</p>
                <hr />
                <h2>单选框</h2>
                
                <input type="radio" v-model='sex' name="sex" id="" value="男" />
                <input type="radio" v-model='sex' name="sex" id="" value="女" />
                <p>{{sex}}</p>
                
                
                <hr />
                <h2>复选框</h2>
                <input type="checkbox" v-model='fx' name="man" id="" value="男" />
                
                
                <input type="checkbox" v-model='fx' name="girl" id="" value="女" />
                <p>{{fx}}</p>
                
                <hr />
                
                <h2>选项</h2>
                <select name="city" v-model='city'>
                    <option value="广州">广州</option>
                    <option value="深圳">深圳</option>
                    <option value="上海">上海</option>
                </select>
                
                <p>{{city}}</p>
                
                <hr />
                <textarea v-model='longtext' name="txt" rows="" cols=""></textarea>
                <p>{{longtext}}</p>
            </div>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        inputText:'',
                        sex:'',
                        fx:[],
                        city:'',
                        longtext:'123'
                    },
                    compute:{
                        
                    }
                    methods:{
                        
                    }
                })
            </script>
        </body>
    </html>
  • 相关阅读:
    Pretty girl,你一定要去旅行
    难受就哭,开心就笑
    你对你的大学生活满意吧
    [leetCode]575. 分糖果
    [leetCode]383.赎金信
    242. 有效的字母异位词
    [leetCode]538. 把二叉搜索树转换为累加树
    [leetCode]面试题 02.07. 链表相交
    [leetCode]206. 反转链表
    [leetCode]707. 设计链表
  • 原文地址:https://www.cnblogs.com/wwthuanyu/p/10554896.html
Copyright © 2011-2022 走看看