vue实现点击后动态添加class及删除同级class

大体思路：声明一个初始变量currentIndex，为0 就是第一个，为1就是第二个默认显示。点击的时候传入的currentIndex=index

html:

js:

css:

延伸拓展：

同样道理的，点击父级，改变对应子集的class，要如何做呢~

html:

注意：由于是循环，所以在最外层要套个<div>

js:

vue动态表单中删除再添加时数据删掉的数据又补上了

vue动态表单中删除再添加时数据删掉的数据又补上了

可能是vue的双向绑定机制，当你删除了某个数据，vue会自动更新数据，当你再添加数据时，vue会自动将数据补上。

在vue的世界里，没有动态添加dom这种概念，一切都是数据驱动

<h1>{{obj.name}}</h1>

<h2>{{obj.prop}}</h2>

<script src="../Scripts/vue.js"></script>

<script>

$(function () {

alert(1)

})

var vue = new Vue({

el: 'body',

data: {

//初始obj是空的，因此视图默认是什么都没有

obj:{}

},

ready: function () {

//这里是vue初始化完成后执行的函数

this.obj.name = "对象名字"//这时会显示name

},

methods: {

//这里是自定义的方法

setProp: function () {

this.obj.prop = "测试"//这时会显示测试

}

}

})

---