vuejs问题总结(二):组件内各种方法

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'}]},
]

铁血汉子 2017年11月4日

0 3179