为了账号安全,请及时绑定邮箱和手机立即绑定

如何正确使用Vue.js的组件

/ 猿问

如何正确使用Vue.js的组件

素胚勾勒不出你 2019-07-14 12:08:35

如何正确使用Vue.js的组件


查看完整描述

2 回答

?
幕布斯6054654

# 下载最新的vue
$ npm install vue
js 引用 vue.js
开始代码,感受vue强大的双向数据绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

实战代码:
<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>

new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
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)
}
}
})





查看完整回答
反对 回复 2019-07-15
?
拉丁的传说

参考如下:
下载最新的vue
$ npm install vue
js 引用 vue.js
开始代码,感受vue强大的双向数据绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
实战代码:
<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>

new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
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)
}
}
})

 



查看完整回答
反对 回复 2019-07-15

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信