【vue核心技术实战精讲】1_vue 实战-优快云博客

本文链接：https://blog.youkuaiyun.com/java_dazhuzhu/article/details/138361153

本文详细介绍了Vue.js中v-model和v-bind的数据绑定方式，包括双向数据流的应用、v-model在输入框、单选/复选框、下拉框中的使用示例，以及单向数据绑定的特点。适合初级开发者和计算机科学学生复习数据绑定概念，提升编程技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

+ [表单控件绑定]( )
+ [组件 - 在输入组件上使用自定义事件]( )

2、`总结`

v-model 双向的数据绑定

双向数据流（绑定）

页⾯面改变影响内存(js)
内存(js)改变影响⻚页⾯面

v-bind 和 v-model 的区别?

input v-model=“name”
- 双向数据绑定⻚页⾯面对于input的value改变，能影响内存中name变量量
- 内存js改变name的值，会影响⻚页⾯面重新渲染最新值
input :value=“name”
- 单向数据绑定内存改变影响⻚页⾯面改变
v-model: 其的改变影响其他 v-bind: 其的改变不不影响其他
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

3-1、`实战` `<input>`

A、 `输入框 type="text"`

示例

<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: 'input',
            }
        })
    </script>
</body>

效果

B、 `单选按钮 type="radio"`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>单选按钮</label>
            <br>
            <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>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
                checked: true,
                picked: 'One',
                checkedNames: ['Jack','input']
            }
        })
    </script>

效果

C、 `复选框 type="checkbox" - 单个复选框，绑定布尔值`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>单个复选框，绑定到布尔值：</label>
            <br>
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label>
        </div>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
                checked: true,
                picked: 'One',
                checkedNames: ['Jack','input']
            }
        })
    </script>

效果

D、 `复选框 type="checkbox" - 多个复选框，绑定到数组`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>多个复选框，绑定到同一个数组</label>
            <br>
            <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>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'input',
                checked: true,
                picked: 'One',
                checkedNames: ['Jack','input']
            }
        })
    </script>

效果

3-2、`实战` `<select>`

示例 1：绑定数组

        <label>下拉框（选择框）</label>
        <br>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>

        <span>Selected: {{ selected }}</span>
        <br>
        
    new Vue({
        el: '#app',
        data: {
            selected: 'D'
        }
    })

效果

示例 2：用 `v-for` 渲染的动态选项

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
        
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})