美文网首页
数据绑定

数据绑定

作者: 青柠_efca | 来源:发表于2019-03-06 18:07 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>v-model数据双向绑定练习</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <input type="text" v-model="name" placeholder="请输入" />
                <h2>你好,{{name}}</h2>
            </div>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        name:''
                    }
                })
            </script>
        </body>
    </html>
    
    运行结果
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>v-bind</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <p>姓名:{{name}}</p>
                <input type="text" v-bind:value="description" />
                <a v-bind:href="url">{{website}}</a>
                <img :src="avatar" >
            </div>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        name:'尤雨溪',
                        description:'Vue.js的创立者',
                        website:'Vue.js官网',
                        url:"https://cn.vuejs.org/",
                        avatar:'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=c08a0c60a844ad342ebf8081e8996bc9/4afbfbedab64034f29596c8ba6c379310b551da2.jpg'
                    }
                })
            </script>
        </body>
    </html>
    
    运行结果

    注:

    要空格在冒号

    <img :src="avatar" >
    

    相关文章

      网友评论

          本文标题:数据绑定

          本文链接:https://www.haomeiwen.com/subject/uemxpqtx.html