【Vue】<input>标签中使用v-model与v-bind进行数据绑定的区别

标签中,可以使用v-modelv-bind将输入框的value与app的某个变量进行绑定,但是,v-model实施的是双向数据绑定,即双方任何一方的变动都会同步变化到另一方,而v-bind实施的是单向数据流的绑定,可以动态更新HTML元素上的属性。

下面看两个例子以对v-modelv-bind进行区分:

v-model 示例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div id="app">
        <label>
            <input v-model="message" placeholder="edit me">
        label>
        <p>Message is: {{ message }}p>
        <button type="button" @click="message = '按下button会变成我'">buttonbutton>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    });
script>
body>
html>

运行后可以看到,当对app.messageinput.value的任何一方做修改时,都会引起另一方的数据变化,此即双向数据绑定

v-bind 示例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div id="app">
        <label>
            <input :value="message" placeholder="edit me">
        label>
        <p>Message is: {{ message }}p>
        <button type="button" @click="message = '按下button会变成我'">buttonbutton>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    });
script>
body>
html>

运行后可以看到,当input.value变化时,并不会引起app.message的变化,但app.message的变化会引起input.value的变化,这就是单项数据流

你可能感兴趣的:(Front,End,vue)