vue点击当前元素添加class 删除兄弟元素的class

在vue中当我们要实现点击元素动态添加类名时，我们不能像JQ那样去用（xxxaddClass(‘class’)siblings()removeClass(‘class’)）实现，那我们应该怎样去做呢

解决方案：
1在data里面申明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）

2在当前元素中添加动态class： “:class”，使用v-bind进行绑定

3给元素点击事件，传入当前元素的index，把元素当前的index赋值给data里面的申明的属性，这样就可以点击实现该效果

一首先给想要添加class的元素，通过v-bind绑定一个class

二在data中声明一个变量activeClass

三在点击事件中

四在style里面写想要的样式就可以了

本小节我们将介绍 Vue 的动态组件，以及缓存 keep-alive 的使用。包括动态组件的使用方法，以及如何使用 keep-alive 实现组件的缓存效果。

动态组件是让多个组件使用同一个挂载点，并动态切换。动态组件是 Vue 的一个高级用法，但其实它的使用非常简单。keep-alive 是 vue 的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染 DOM。

通过使用保留的 元素，动态地把组件名称绑定到它的 is 特性，可以实现动态组件：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2 行，我们使用动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-11 行，我们定义了组件 ComponentA、ComponentB、ComponentC。

最终的实现效果是：当点击按钮的时候会动态切换展示的组件。

keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被 keep-alive 缓存的组件只有在初次渲染时才会被创建，并且当组件切换时不会被销毁。

keep-alive 的用法相对简单，直接使用 keep-alive 包裹需要缓存的组件即可：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-29 行，我们定义了组件 ComponentA、ComponentB、ComponentC，分别定义了他们的 created 和 beforeDestroy 事件。

之前我们介绍过， keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，我们通过修改 currentView 切换组件时，组件的 beforeDestroy 事件不会触发。若该组件是第一次渲染，会触发 created 事件，当再次切换显示该组件时，created 事件不会再次触发。

activated 和 deactivated 和我们之前学习的生命周期函数一样，也是组件的生命周期函数。不过， activated 和 deactivated 只在 内的所有嵌套组件中触发。 activated ：进入组件时触发。 deactivated ：退出组件时触发。

示例代码：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码中，我们定义了组件 ComponentA、ComponentB，并分别定义了他们的 activated 和 deactivated 事件函数。 HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行，我们定义了两个按钮，通过点击按钮切换 currentView 的值。当我们切换组件显示时，可以看到这样的打印信息：

include 和 exclude 是 keep-alive 的两个属性，允许组件有条件地缓存。 include： 可以是字符串或正则表达式，用来表示只有名称匹配的组件会被缓存。 exclude： 可以是字符串或正则表达式，用来表示名称匹配的组件不会被缓存。

示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定需要缓存组件 ComponentA，ComponentB。 在之前的小节我们了解到 keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，在案例中，组件 ComponentA 和 ComponentB 的 created 函数只有在第一次组件被创建的时候才会触发，而 ComponentC 的 created 函数当每次组件显示的时候都会触发。

exclude 示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA，ComponentB。

本节，我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点：

一、Vuecss过渡的基本语法hello然后为expand-transition,expand-enter和expand-leave添加CSS/必需/expand-transition{transition:all3sease;height:30px;padding:10px;background-color:#eee;overflow:hidden;}/expand-enter定义进入的开始状态//expand-leave定义离开的结束状态/expand-enter,expand-leave{height:0;padding:010px;opacity:0;}你可以在同一元素上通过动态绑定实现不同的过渡：hellonewVue({el:'',data:{show:false,transitionName:'fade'}})

原文网址： >

json 是个字符串  要添加属性 必须先转换为  对象 或者数组

// 题主说 添加属性 那这个json 应该是一个 对象json   
var JsonString = '{"age":1,"name":"tom"}'
// 先要把json 转化为对象
var jsonObj = JSONparse(JsonString)
// 然后在该对象中添加一个 sex 字段
jsonObj["sex"] = "男"  // 或者  jsonObjsex = "男"  (如果你添加的字段中有  - 等特殊字符)，就只能使用第一种
// 如果你要使用 直接使用jsonObj 就可以 如果还要转化回去 使用 JSONprase()方法
JsonString = JSONprase(jsonObj)

在vue中有时候可能想像使用jq一样给某个元素添加属性，如
$('#select1')attr('disabled','disabled')1
这种方法也能实现，但是在vue中能用vue的方法还是尽量不要使用jq
使用vue的方法来添加属性可以这样：
<select v-model='issues' class="ui dropdown t-select-list" :disabled='isDisabled'>
<option></option>
</selected>123
disabled是表单元素的原生属性，可以直接使用属性绑定的语法 :disabled 来绑定，然后加上一个条件就可以控制这个属性动态添加删除，如：
watch:{
issueDatas(){
if(thisissueDatasstate==5){
thisisDisabled=true;
}
}
}

<ul class="rs_tree">
<li v-for="node in treeData">
<div @click="childrenShow(node,$event)" class="rs_tree_text">
<span class="rs_tree_dot" v-if="!isFolder(node)"></span>
<em class="fa fa-folder" v-if="isFolder(node)&&!nodeisShow"></em>
<em class="fa fa-folder-open" v-if="isFolder(node)&&nodeisShow"></em>
<span class="rs_tree_label">{{nodetext}}</span>
<input type="text" class="rs_edit_input" v-model="nodetext" @click="stop($event)" @keyupenter="editEnd()">
<div class="rs_tree_icon" v-if="nodeadd" @click="addItem(node,$event)" title="新增"><i class="fa fa-plus"></i></div>
<div class="rs_tree_icon" v-if="nodeedit" @click="editItem(node,$event)" title="编辑"><i class="fa fa-edit"></i></div>
<div class="rs_tree_icon" v-if="nodedel" @click="delItem(node,$event)" title="删除"><i class="fa fa-trash"></i></div>
</div>
<items v-if="isFolder(node)" v-show="nodeisShow" :tree-data="nodechildren" transition="node-down"></items>
</li>

---