表单输入绑定v-model

最新推荐文章于 2022-11-28 14:50:18 发布

不能say的秘密

最新推荐文章于 2022-11-28 14:50:18 发布

阅读量443

点赞数

分类专栏：每日前端学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_44169596/article/details/111219294

版权

每日前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

表单输入绑定v-model

v-model 双向的数据绑定

双向数据流（绑定)：

页面改变影响内存(js)，内存(js)改变影响页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表单输入绑定v-model</title>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
            <input type="text" v-model="msg">
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'科比'
                },
                methods:{}
            })
        </script>
    </body>
    </html>

# 文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
# 多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
# 复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
# 多个复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
# 单选按钮
<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
# 选择框
<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
# 多选时（绑定到一个数组）
<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表单输入绑定v-model</title>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
            <input type="text" v-model="msg">
            <label for="checkbox">{{checked}}</label>
            <input type="checkbox" id="checkbox" v-model="checked">
            <div class="box">
                <label for="a">黄瓜</label>
                <input type="checkbox" id="a" value="黄瓜" v-model="checkedNames">
                <label for="b">西红柿</label>
                <input type="checkbox" id="b" value="西红柿" v-model="checkedNames">
                <label for="c">芸豆</label>
                <input type="checkbox" id="c" value="芸豆" v-model="checkedNames">
                <br/>
                <span>{{checkedNames}}</span>
            </div>
            <label>{{txt}}</label>
            <input v-model.lazy="txt">
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'科比',
                    txt:'',
                    checked:false,
                    checkedNames:[]
                },
                methods:{}
            })
        </script>
    </body>
    </html>

v-bind和v-model的区别?

不能say的秘密

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
表单输入绑定v-model

表单输入绑定v-modelv-model 双向的数据绑定双向数据流（绑定)：页面改变影响内存(js)，内存(js)改变影响页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale">
复制链接

扫一扫