Vue.js--表单绑定数据、修饰符详解

刺骨的言语ヽ痛彻心扉 2021-08-13 19:46 446阅读 0赞

#### 单行输入框 ####

<div id="myApp">
        <h1>表单控件绑定</h1>
        <input type="text" v-model="message" placeholder="编辑栏">
        <p>Message is: {
       {message}}</p>
    </div>
    <script> var myApp = new Vue({ el: '#myApp', data: { message: "我爱马里奥", }, methods: { } }); </script>

![在这里插入图片描述][20191011095919954.png]

#### 复选框 ####

<div id="myApp">
        <h1>表单复选框</h1>
        <input type="checkbox" id="生化危机" value="生化危机" v-model="checkedGames">
        <label for="生化危机">生化危机</label>
        <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
        <label for="模拟飞行">模拟飞行</label>
        <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
        <label for="塞尔达传说">塞尔达传说</label>
        <br>
        <p>您的选择是：{
       {checkedGames}}</p>
    </div>
    <script> var myApp = new Vue({ el: '#myApp', data: { checkedGames: [] } }); </script>

![在这里插入图片描述][20191011100012548.png]

#### 单选按钮 ####

<div id="myApp">
        <h1>表单单选按钮</h1>
    
        <h3>选择性别</h3>
        <input type="radio" id="male" value="男" v-model="pickedSex">
        <label for="male">男</label>
        <br>
        <input type="radio" id="female" value="女" v-model="pickedSex">
        <label for="female">女</label>
    
    
        <h3>选择爱好</h3>
        <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
        <label for="game">玩游戏</label>
        <br>
        <input type="radio" id="movie" value="看电影" v-model="pickedHobby">
        <label for="movie">看电影</label>
    
        <h3>选择结果</h3>
        <p>性别：{
       {pickedSex}}</p>
        <p>爱好：{
       {pickedHobby}}</p>
    </div>
    <script> var myApp = new Vue({ el: '#myApp', data: { pickedSex: "", pickedHobby: "" } }); </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

#### 下拉框 ####

<div id="myApp">
        <h3>你最喜欢的NBA球星是：</h3>
        <select v-model="likedNBAStar" style="widows: 20px;">
            <option>科比</option>
            <option>詹姆斯</option>
            <option>哈登</option>
            <option>库里</option>
            <option>杜兰特</option>
        </select>
    
    
        <h3>我的全明星：</h3>
        <select v-model="likedNBAStars" multiple style="width: 210px; height:210px;">
            <option>阿德脱昆博</option>
            <option>怀特塞德</option>
            <option>阿尔德里奇</option>
            <option>戴维斯</option>
            <option>格里芬</option>
            <option>詹姆斯</option>
            <option>哈登</option>
            <option>库里</option>
            <option>杜兰特</option>
            <option>欧文</option>
            <option>保罗</option>
            <option>韦德</option>
            <option>德罗赞</option>
            <option>林书豪</option>           
        </select>
    
    
        <h3>我的选择结果</h3>
        <p>我最喜欢：{
       {likedNBAStar}}</p>
        <p>我的全明星：{
       {likedNBAStars}}</p>
    </div>
    <script> var myApp = new Vue({ el: '#myApp', data: { likedNBAStar: "", likedNBAStars: [] } }); </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]

#### 修饰符 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <title>表单修饰物</title>
    </head>
    <body>
        
        <div id="myApp">
            <h1>用户注册</h1>
    
            <div>
                <label for="username">用户:</label>
                <input type="text" id="username" v-model.lazy="username" @change="checkUserName">
                <span v-if="checkUserNameOK">可注册</span>
            </div>
            <div>
                <label for="age">年龄:</label>
                <input type="number" id="age" v-model.number="age">
            </div>
            <div>
                <label for="content">意见:</label><br>
                <textarea id="content" v-model.trim="content" cols="50" rows="10"></textarea>
            </div>
    
            <h4>信息区</h4>
            <p>{
       {username}}</p>
            <p>{
       {age}}</p>
            <p><pre>{
       {content}}</pre></p>
        </div>
        <script> var myApp = new Vue({ el: '#myApp', data: { username: "", checkUserNameOK: false, age: "", content: "" }, methods: { checkUserName: function () { if(this.username.length > 0) this.checkUserNameOK = true; else this.checkUserNameOK = false; } } }); </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]

[20191011095919954.png]: /images/20210813/d8123fd08c3e46fc8afd6022077996a3.png
[20191011100012548.png]: /images/20210813/b2c4386d6b8a453ba608e0e02f36fccd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/dac650bab4cf4b3db947f352fd7714fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/50ec46e7b6c841e79de2bb02fdd577f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]: /images/20210813/8a8f84ec1da94600b743a9439e086e4f.png