1.组件引用
<template>
<div class="content">
<h1>title</h1>
<subcontent class="subcontent_style"></subcontent>
</div>
</template>
<script>
import lifeChart from '@/components/sub/subcontent'
export default{
name:'content',
data(){
return{}
},
components:{
'lifeChart':lifeChart
},
methods:{}
}
</script>
2.组件内mounted,watch 如何调用methods中的方法
mounted() {
this.getchart();
},
watch:{
searchchart:'getchart'
},
methods:{
getchart:function(){}
}
3.vue中透明蒙层点击空白处关闭
<div class="mask" @click.self="hidemask()"></div>
methods:{
hidemask(){
$('.mask').hide();
}
}
4.获取索引值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(option,index) in options">
<p class="text-success" v-on:click="getIndex(index)">Text:{{option.text}}--Vlue:{{option.value}}</p>
</li>
</ul>
<div v-if="isNaN(click)==false">
<span>你点击的索引为: {{ click }}</span>
</div>
<div v-else>
<p class="text-danger">试着点击上方LI条目</p>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
click: 'a',
options: [
{ text: '上海市', value: '20' },
{ text: '湖北省', value: '43' },
{ text: '河南省', value: '45' },
{ text: '北京市', value: '10' }
]
},
methods:{
getIndex:function($index){
this.click=$index;
}
}
});
</script>
</body>
</html>
对比代码，此处如果ul,li更换为select,option元素，点击事件失效
<select>
<option v-for="(option,index) in options">
<p class="text-success" v-on:click="getIndex(index)">Text:{{option.text}}--Vlue:{{option.value}}</p>
</option>
</select>
//点击事件并不会触发
5.option 获取索引
<select v-model="checkName">
<option value="">请选择</option>
<option v-for="(item,index) in checkNameOption" :value=index>{{item}}</option>
</select>
此时this.checkName的值为选中的option的索引
6.vue for 嵌套
<ul class="menuList">
<li v-for="item in diseaseList">
<span>{{item.cate}}</span>
<ul class="menuList_sub">
<li v-for="sub in item.sublist">
<span>{{sub.subcate}}</span>
</li>
</ul>
</li>
</ul>
diseaseList:[
{cate:'3333'},
{cate:'4444',sublist:[{subcate:'子分类001'},{subcate:'子分类006'}]},
{cate:'5555',sublist:[{subcate:'子分类001'},{subcate:'子分类006'}]},
{cate:'6666',sublist:[{subcate:'子分类001'},{subcate:'子分类006'}]},
]
