VUE.js的简单使用及路径
Vue.js线上路径,可以导入.html双向绑定值{{ todo.text }}X.js中获取值new Vue({el: '#app',data: {//添加新的数据
·
Vue.js线上路径,可以导入
<script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"></script>
.html双向绑定值
<div id="app"> <!--v-model就是将input里面的数值和添加内容的改变而改变--> <!--当键盘点击enter时,需要的用到的函数 v-on:keyup.enter--> <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>
.js中获取值
new Vue({ el: '#app', data: { // 添加新的数据 newTodo: '', // 我们要将用户输入的事项添加到todos数组中 todos: [ { text: 'Add some todos' } ] }, methods: { // 用户按下enter键的时候,触发事件 addTodo: function () { var text = this.newTodo.trim() if (text) { this.todos.push({ text: text }) this.newTodo = '' } }, removeTodo: function (index) { this.todos.splice(index, 1) } } })
更多推荐
已为社区贡献2条内容
所有评论(0)