最近自己在學習Vue.js，在看一些課程的時候可能Vue更新太塊了導致課程所講知識和現在Vue的版本不符，從而報錯，我會在以後的帖子持續更新Vue的變化與更新，大家也可以一起交流，共同監督學習！ 1.關於Vue中$index獲取索引值已經取消，多用於多個元素的操作，像ul中的li，通過v-for來建 ...
最近自己在學習Vue.js，在看一些課程的時候可能Vue更新太塊了導致課程所講知識和現在Vue的版本不符，從而報錯，我會在以後的帖子持續更新Vue的變化與更新，大家也可以一起交流，共同監督學習！
1.關於Vue中$index獲取索引值已經取消，多用於多個元素的操作，像ul中的li，通過v-for來建立多個li，如果對於其中的某個或者一些li操作的話，需要使用到索引值，用法如下;
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button v-on:click="reverse">點擊</button>
<input v-model="newtodo" v-on:keyup.enter="add">
<ul>
<li v-for="(todo,index) in todos">
<span>{{todo.text}}</span>
<button v-on:click="remove(index)">刪除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
todos: [
{text:'我是一開始就有的哦!'}
],
newtodo: ''
}
},
methods: {
reverse: function(){
this.msg = this.msg.split('').reverse().join('')
},
add: function(){
var text = this.newtodo.trim();
if(text){
this.todos.push({text:text});
this.newtodo = ''
}
},
remove: function(index){
this.todos.splice(index,1)
}
}
}
</script>
這是我自己組建的一個片段，重點在於index的使用。
2.關於Vue中partial被取消的問題，這裡可以用is來動態綁定組件
<body>
<div id="app">
<button v-on:click="change">變化</button>
<p>{{currentView}}{{msg}}</p>
</div>
<component v-bind:is="currentView"></component>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
currentView: 'hello',
msg: '星豪，歡迎來到Vue的世界！'
},
methods: {
change: function(){
var arr = ['hello','hi'];
var index = arr.indexOf(this.currentView);
if(index < 1){
this.currentView = arr[index + 1]
}else{
this.currentView = arr[0]
}
}
},
components: {
hello: {template: '<p>Hello</p>'},
hi: {template: '<p>你好</p>'}
}
})
</script>
在這裡不可以用js中的index++來使索引值增加
