Vue.js基础知识小结
程序员文章站
2022-12-28 16:34:31
数据绑定
1.单向绑定
{{massage}}
var app = new vue...数据绑定
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="js/vue.min.js"></script> <script> new vue({ el:"#app", data:{ newtodo:"", todos:[ { text:'add some todos 1' }, { text:'add some todos 2' },{ text:'add some todos 3' } ] }, methods:{ addtodo: function(){ //去除首尾的空格 var text = this.newtodo.trim(); //去除后非空的话 if(text){ this.todos.push({ text: text }) this.newtodo = '' } }, removetodo: function(index){ this.todos.splice( index, 1 ) } } }) </script>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: PHP安全技术之 实现php基本安全
下一篇: Python3遍历目录树实现方法