Vue--数据双向绑定

来源:互联网 发布:窗帘款式设计软件 编辑:程序博客网 时间:2024/03/29 16:09
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/vue.js"></script></head><body><!----    在VUE中,数据双向绑定时,必须在data属性中申明这个变量    {{}}  === v-text 进行文本的数据双向绑定    v-html 进行脚本的数据双向绑定 尽量不要使用,有安全问题--xss攻击问题    v-bind:属性名="属性值"---->    <div id="app">        {{msg}}    </div>    <hr/>    <div class="one">        <input type="text" v-model="name">        {{name}}    </div>    <hr/>    <div class="box">        <div v-bind:title="'555'">把鼠标放上1</div>        <div v-bind:title="inbox">把鼠标放上2</div>    </div>    <hr/>    <div class="bin">        <input type="text" v-model="username">        <div v-text="username"></div>        <div v-html="msg"></div>    </div></body><script>    new Vue({        "el":".bin",        "data":{            "username":"我想有个女朋友",            "msg":"<h1>这里不安全</h1>"        }    })    new Vue({        "el":"#app",        "data":{            "msg":"你好我是第一节"        },    });    new Vue({        "el":".one",        "data":{            "name":"小明"        }    });    var app=new Vue({        "el":".box",        "data":{            "name":"小明",            "inbox":"我是第二个"        }    })</script></html>
原创粉丝点击