1.:class="{active:index==0}"
var hPas = [
{name:'海表平面',value:'SLP'},
{name:'850hPa气压高度',value:'850hPa'},
{name:'700hPa气压高度',value:'700hPa'},
{name:'500hPa气压高度',value:'500hPa'},
{name:'垂直剖面',value:'Cross_A00'},
{name:'45度剖面',value:'Cross_A45'},
{name:'90度剖面',value:'Cross_A90'},
{name:'斜温图',value:'SkewT'}
];
如果是这种点击之后自己添加激活状态,其余的兄弟元素移除激活状态的话就要加一个属性,active,刚开始的时候把所有的置为false,当点击哪个的时候就先遍历一遍这个数据结构,
把所有的对象的这个active属性都置为false,然后把点击的这个置为true
2.如果要把css和js分开的话,那就在style标签里面import css文件
3.谷歌浏览器的禁止缓存怎么设置?shift+ctrl+n进入无痕浏览
4.注意这个kind和ele,ele是对象,是引用类型,传入的是一个地址,方法能能改变这个对象,
kind只是一个值(this.choiced_day的属性值),是基本类型,不是引用类型,传入后是一个局部变量,改变的是这个局部变量
传入一个对象的属性和传入一个对象是两码事
choice(ele,v,kind){
for(let obj of ele){
obj.active = false
}
v.active = true;
this[kind] = v.value;
this.getPic()
},
5.vue router-link 上添加点击事件 route-link是指向vue-router的路由的
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况
我想要做的是v-for遍历出来的选项卡,鼠标移上去出现删除标签,移除标签消失的效果
原代码:
<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag(index)" @mouseout="outTag(index)">{{item.listTitle}}
<i class="contain_tab_close" v-show="selected==index"></i>
</router-link>
根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。
所以如果在想要在router-link上添加事件的话需要@click.native这样写
所以如果要事件有效的话,改成如下:
<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover.native="overTag(index)" @mouseout.native="outTag(index)">{{item.listTitle}}
<i class="contain_tab_close" v-show="selected==index"></i>
</router-link>
var hPas = [
{name:'海表平面',value:'SLP'},
{name:'850hPa气压高度',value:'850hPa'},
{name:'700hPa气压高度',value:'700hPa'},
{name:'500hPa气压高度',value:'500hPa'},
{name:'垂直剖面',value:'Cross_A00'},
{name:'45度剖面',value:'Cross_A45'},
{name:'90度剖面',value:'Cross_A90'},
{name:'斜温图',value:'SkewT'}
];
如果是这种点击之后自己添加激活状态,其余的兄弟元素移除激活状态的话就要加一个属性,active,刚开始的时候把所有的置为false,当点击哪个的时候就先遍历一遍这个数据结构,
把所有的对象的这个active属性都置为false,然后把点击的这个置为true
2.如果要把css和js分开的话,那就在style标签里面import css文件
3.谷歌浏览器的禁止缓存怎么设置?shift+ctrl+n进入无痕浏览
4.注意这个kind和ele,ele是对象,是引用类型,传入的是一个地址,方法能能改变这个对象,
kind只是一个值(this.choiced_day的属性值),是基本类型,不是引用类型,传入后是一个局部变量,改变的是这个局部变量
传入一个对象的属性和传入一个对象是两码事
choice(ele,v,kind){
for(let obj of ele){
obj.active = false
}
v.active = true;
this[kind] = v.value;
this.getPic()
},
5.vue router-link 上添加点击事件 route-link是指向vue-router的路由的
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况
我想要做的是v-for遍历出来的选项卡,鼠标移上去出现删除标签,移除标签消失的效果
原代码:
<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag(index)" @mouseout="outTag(index)">{{item.listTitle}}
<i class="contain_tab_close" v-show="selected==index"></i>
</router-link>
根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。
所以如果在想要在router-link上添加事件的话需要@click.native这样写
所以如果要事件有效的话,改成如下:
<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover.native="overTag(index)" @mouseout.native="outTag(index)">{{item.listTitle}}
<i class="contain_tab_close" v-show="selected==index"></i>
</router-link>