Vue v-model two-way binding

Vue two-way binding

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="id01">
        <p>{
   
   {msg}}</p>
        <!-- v-bind 不可以双向绑定 -->
        <input type="text" :value="msg"><br>
        <!-- v-model 双向绑定,只能绑定 value 属性 -->
        <input type="text" v-model="msg"><br>
        <!-- ----------------------------------- -->
        <input type="text" v-model="score"><br>
        <input type="range" v-model="score" min="0" :max="maxValue">
        <br>
        <select v-model="maxValue">
            <option value="100">100</option>
            <option value="1000">1000</option>
            <option value="10000">10000</option>
        </select>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
     
     
        el: "#id01",
        data: {
     
     
            msg: "Hello 小印",
            score: 50,
            maxValue: 100
        }
    })
</script>

Take a few notes so you can read them later.

Guess you like

Origin blog.csdn.net/qq_44111597/article/details/109119148