富贵资源网 Design By www.hznty.com
数据绑定
1.单向绑定
<div id="app">
{{massage}}
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
2.双向绑定
<div id="app">
<p>{{message}}</p>
<input v-model="message" />
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
3.v-for列表渲染
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
new Vue({
el:"#app",
data:{
todos:[
{text:"abcdef"},
{text:"123456"},
{text:"qwerta"}
] }
})
3.处理用户输入
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: "#app",
data:{
message:"Hello Vue.js!"
},
methods:{
reverseMessage:function()
{
this .message = this.message.split('').revserse().join('');
}
}
})
4.综合
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo" />
<ul>
<li v-for = "todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/vue.min.js">以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...