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

  • 相关阅读:
    51nod 1031+斐波那契和杨辉三角的一些基础知识
    51nod 1297
    萌新二叉树学习笔记
    HDU3415【单调队列】
    萌新瞎讲网络流之最大流【不定期更新理解篇】
    萌新浅谈单调队列
    51nod 1021【区间DP】
    51nod 1278【贪心】
    51nod 1413
    51nod1181【素数筛】
  • 原文地址:https://www.cnblogs.com/hemude7788/p/5939092.html
Copyright © 2011-2022 走看看