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 特性

  • 相关阅读:
    零拷贝
    RxJava2源码解析
    一次博客崩溃日志分析
    Spring循环依赖的解决
    解决网络卡顿问题
    软工第一次作业
    3月26-27号训练笔记
    Codeforces Round #708 (Div. 2)题解A,B,C1,C2,E1,E2
    求出所有LIS的可行起点
    2020小米邀请赛决赛补题G,I,J(三DP)
  • 原文地址:https://www.cnblogs.com/hemude7788/p/5939092.html
Copyright © 2011-2022 走看看