zoukankan      html  css  js  c++  java
  • Vue之数据绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <!-- 双向绑定实例:将模型msg绑定到输入框,输入框的文本值的改变会影响msg进而改变p标签的内容-->
            <input type="text" v-model="msg"/>
            <p> {{ msg }} </p>
    
            <!-- 单向数据绑定,自定义属性-->
            <h3 v-bind:qwe='data'></h3>
        </div>
    
        <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
        <script typt="text/javascript">
            // Vue中的数据绑定有2种方式:分为单向数据绑定和双向数据绑定
            // 1、单向数据绑定:就是正常的数据渲染,从model到View,使用v-bind可以将自定义属性与model相关联
            // 2、双向数据绑定:与单向数据绑定不同,
            // 它可以从model到view,然后view再到model、model再影响view,使用双向数据绑定需要使用指令v-model
            // 使用双向数据绑定需要用到表单控件
    
            new Vue({
                el: "#app",
                data: function(){
                    return {
                        msg: "啦啦啦啦,快来修改我吧~",
                        data: 'data-k1'
                    }
                }
            })
        </script>
    </body>
    </html>
    
  • 相关阅读:
    织梦开发——相关阅读likeart应用
    织梦标签教程
    织梦专题调用代码
    HIT 2543 Stone IV
    POJ 3680 Intervals
    HIT 2739 The Chinese Postman Problem
    POJ 1273 Drainage Ditches
    POJ 2455 Secret Milking Machine
    SPOJ 371 Boxes
    HIT 2715 Matrix3
  • 原文地址:https://www.cnblogs.com/yunche/p/11077466.html
Copyright © 2011-2022 走看看