v-model绑定input、textarea、checkbox、radio、select

小小红色无花果

于 2023-10-11 18:42:17 发布

阅读量511

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_45096939/article/details/133776324

版权

1.input

<div>
            <!-- v-model绑定input -->
            <input type="text" v-model="message">
            <h2>{{message}}</h2>
        </div>

<script>
        const App={
            template:'#my-app',
            data() {
                return {
                    message:'Hello World',
                }
            },
        }

        Vue.createApp(App).mount('#app')
    </script>

效果如下：

2.textarea

<div>
            <!-- v-model绑定textarea -->
            <textarea name="" id="" cols="30" rows="3" v-model="texta"></textarea>
            <h2>{{texta}}</h2>
        </div>
<script>
        const App={
            template:'#my-app',
            data() {
                return {
                    texta:"textarea",
                    
                }
            },
        }

        Vue.createApp(App).mount('#app')
    </script>

效果如下：

3.checkbox

<div>
            <!-- v-model绑定多选checkbox【多选框绑定v-model显示必须写value，v-model显示的值就是value中的值】-->
            <span>你的爱好：</span>
            <label for="basketball">
                <input type="checkbox" v-model="hobbies" value="basketball">篮球
            </label>
            <label for="football">
                <input type="checkbox" v-model="hobbies" value="football">足球
            </label>
            <label for="badminton">
                <input type="checkbox" v-model="hobbies" value="badminton">羽毛球
            </label>
            <label for="tennis">
                <input type="checkbox" v-model="hobbies" value="tennis">网球
            </label>
            <h2>{{hobbies}}</h2>
        </div>

<script>
        const App={
            template:'#my-app',
            data() {
                return {
                    hobbies:[],
                }
            },
        }

        Vue.createApp(App).mount('#app')
    </script>

效果如下：

4.radio

<div>
            <!-- v-model绑定单选radio -->
            <span>性别：</span>
            <label for="male">
                <input type="radio" v-model="gender" value="male">男
            </label>
            <label for="female">
                <input type="radio" v-model="gender" value="female">女
            </label>
            <h2>性别选项是{{gender}}</h2>
        </div>
<script>
        const App={
            template:'#my-app',
            data() {
                return {
                    gender:'',
                
                }
            },
        }

        Vue.createApp(App).mount('#app')
    </script>

效果如下：

5.select

<div>
            <!-- v-model绑定select下拉框(select添加multiple size="2" 可多选至2) -->
            <select v-model="fruit" name="" id="">
                <option value="apple">苹果</option>
                <option value="banana">香蕉</option>
                <option value="orange">橙子</option>
            </select>
            <h2>水果{{fruit}}</h2>
        </div>
 <script>
        const App={
            template:'#my-app',
            data() {
                return {
                   fruit:[],
                }
            },
        }

        Vue.createApp(App).mount('#app')
    </script>

效果如下：