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

  • 相关阅读:
    C/C++ assert() 函数用法
    C/C++ 字符编码的转换(ut8、gb2312)
    C++多字节与宽字节间的转换(wchar_t与char转换)
    C语言中的多字节字符与宽字符
    表表达式
    OEE
    机器表现性
    出勤时间
    设备直接利用率
    SQL execution time
  • 原文地址:https://www.cnblogs.com/hemude7788/p/5939092.html
Copyright © 2011-2022 走看看