zoukankan      html  css  js  c++  java
  • Vue模板语法中数据绑定

    1.单项数据绑定

    <div id="di">
    <input type="text" :value="input_val">
    </div>
    
    <script>
    var app = new vue({
    el: '#di',
    data: {
    input_val: 'hello world '
    }
    })
    </script>

    通过浏览器 REPL 环境可以进行修改 app.input_val = 'vue'

    我们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为 单向数据绑定 ;

    2.双向数据绑定v-model:

    <div id="di">
        <input type="text" v-model="input_val" >
    </div>
    
    <script>
        var app = new Vue({
            el: '#di',
            data: {
                input_val: 'hello world '
            }
        })
    </script>

    通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定 ;不管 DOM 元素还是 vue 对象,数据的改变都会影响到另一个;

    资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

    2.1双向数据绑定的应用范围:

    文本框 & 文本域

    <div id="di">
        <textarea v-model="inp_val"></textarea>
        <div>{{ inp_val }}</div>
    </div>
    
    <script>
        var app = new Vue({
            el: '#di',
            data: {
                inp_val: ''
            }
        })
    </script>
     
    绑定复选框
    <div id="di">
        吃饭:<input type="checkbox" value="eat" v-model="checklist"><br>
        睡觉:<input type="checkbox" value="sleep" v-model="checklist"><br>
        {{ checklist }}
    </div>
    
    <script>
        var vm = new Vue({
           el: '#di',
            data: { checklist: []
            }
        });
    </script>
     

    绑定单选框

    <div id="ap">
        男<input type="radio" name="sex" value="男" v-model="sex">
        女<input type="radio" name="sex" value="女" v-model="sex"> 
        <br>
        {{sex}}
    </div>
    
    <script>
        var vm = new Vue({
            el: '#ap',
            data: {
                sex: ''
            }
        });
    </script>
  • 相关阅读:
    数组与指针
    壁纸
    2019/1/11
    指针A
    数组B
    一起来抓老鼠啊!快乐呀!
    打印沙漏
    I think I need a boat house
    币值转换
    《C语言程序设计》编程总结汇总
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14132675.html
Copyright © 2011-2022 走看看