vue操作表单(v-model)

Vue 2019-10-06 837

1.文本框

<div id="app">    
        <input type="text" placeholder="请输入" v-model="text">    
        <div>输入内容是:</div>    
        <p style="color: #5bc0de">{{text}}</p>    
</div>    
<script>    
    var app = new Vue({    
        el: '#app',    
        data: {    
            message: 'Hello Vue',    
            text: ''    
        }    
    })    
</script>  

效果:

 

 

 

2.单选

单独使用可以使用v-bind绑定一个布尔值

<body>    
    <div id="app">    
        <input type="radio" v-model="picked" value="html" id="html">    
        <label for="html">HTML</label>    
        <br>    
        <input type="radio" v-model="picked" value="js" id="js">    
        <label for="html">JavaScript</label>    
        <br>    
        <input type="radio" v-model="picked" value="css" id="css">    
        <label for="html">CSS</label>    
        <br>    
        <p>选择的项是:{{picked}}</p>    
    </div>    
</body>    
<script>    
    var app = new Vue({    
        el: '#app',    
        data: {    
            message: 'Hello Vue',    
            picked: 'js',    
        }    
    })    
</script>  

 效果:

 

 

 

 

 

 

 

3.复选框

<body>    
    <div id="app">    
        <input type="checkbox" v-model="checked" value="html" id="html">    
        <label for="html">HTML</label>    
        <br>    
        <input type="checkbox" v-model="checked" value="js" id="js">    
        <label for="js">JS</label>    
        <br>    
        <input type="checkbox" v-model="checked" value="css" id="css">    
        <label for="css">CSS</label>    
        <br>    
        <p>选择的值:{{checked}}</p>    
    </div>    
</body>    
<script>    
    var app = new Vue({    
        el: '#app',    
        data: {    
            message: 'Hello Vue',    
            checked: ['html', 'css']    
        }    
    })    
</script>  

效果:

4.下拉框

<body>    
    <div id="app">    
        <!--单选-->    
        <select v-model="selected">    
            <option>html</option>    
            <option>js</option>    
            <option>css</option>    
        </select>    
        <p>选择的项:{{selected}}</p>    
        <!--多选-->    
        <select v-model="selected2" multiple>    
            <option>html</option>    
            <option value="js">js</option>    
            <option>css</option>    
        </select>    
        <p>选择的项:{{selected2}}</p>    
        <!--动态渲染-->    
        <select v-model="selected3">    
            <option v-for="option in options" :value="option.value">{{option.text}}</option>    
        </select>    
        <p>选择的项:{{selected3}}</p>    
    </div>    
</body>    
<script>    
    var app = new Vue({    
        el: '#app',    
        data: {    
            message: 'Hello Vue',    
            selected: 'js',    
            selected2: ['js', 'html'],    
            selected3: 'js',    
            options: [    
                {"text": 'JS', "value": 'js'},    
                {"text": 'HTML', 'value': 'html'},    
                {"text": 'CSS', "value": "css"},    
            ]    
        }    
    })    
</script>  

<option>是备选项,如果含有value属性,v-model将优先匹配value的值,否则,将匹配<option>的text的值
效果:

标签:Vue

文章评论

评论列表

已有0条评论