zoukankan      html  css  js  c++  java
  • Vue v-bind v-model的使用

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据

    最基础的就是实现一个联动的效果

    <body>
        <div class="app">
            <span>Multiline message is:</span>
            <p>{{message}}</p>
            <br>
            <textarea name="" v-model="message" placeholder="please write..."></textarea>
        </div>
    
    </body>
    <script>
       new Vue({
             el:'.app'
       })
    </script>

    checkbox

    <body>
        <div class="app">
            <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="jack">John</label>
            <input type="checkbox" id="Mike" value="Mike"  v-model="checkedNames">
            <label for="jack">Mike</label>
            <br>
            <span>Checked names:{{checkedNames}}</span>
        </div>
        
    </body>
    <script>
       new Vue({
             el:'.app',
             data:{
                 checkedNames:[]
             }
       })
    </script>

    v-bind

    有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性

  • 相关阅读:
    JAVA基础——编程练习(二)
    JAVA基础——面向对象三大特性:封装、继承、多态
    JVM内存
    50. Pow(x, n) (JAVA)
    47. Permutations II (JAVA)
    46. Permutations (JAVA)
    45. Jump Game II (JAVA)
    43. Multiply Strings (JAVA)
    42. Trapping Rain Water (JAVA)
    41. First Missing Positive (JAVA)
  • 原文地址:https://www.cnblogs.com/hemude7788/p/5939092.html
Copyright © 2011-2022 走看看