vue-cli vant组件应用， template应用

Posted 2021-03-15 xiaobaibubai

1、在index.js中引入vant组件

import { Button } from ‘vant‘
Vue.use(Button);

import { Cell, CellGroup } from ‘vant‘;
Vue.use(Cell);
Vue.use(CellGroup);

import { Popup } from ‘vant‘;
Vue.use(Popup);

2、template应用。（template标签，我们都知道是用来写 html 模板的，且内部必须只有一个根元素（div）（不然报错））

<template>
    <div>  	 
      <template>
	      <van-button type="default">默认按钮</van-button>
	      <van-button type="primary">主要按钮</van-button>
	      <van-button type="info">信息按钮</van-button>
	      <van-button type="warning">警告按钮</van-button>
	      <van-button type="danger">危险按钮</van-button>
      </template>
      <template>  
	      <van-cell-group>
		 	 <van-cell title="单元格" value="内容" />
		 	 <van-cell title="单元格" value="内容" label="描述信息" />
		  </van-cell-group>
	  </template>
	  <template> 
	  	  <van-cell is-link @click="showPopup">展示弹出层</van-cell>
		  <van-popup
			  v-model="show"
			  position="bottom"
			  :style="{ height: ‘20%‘ }"
			>
				这是一个弹出层内容
			</van-popup>
	 </template>
    </div>
</template>

<script>

export default {		   
  		name: ‘HelloWorld‘,	   
	  data () {
	    return {	     
	      show: false
	    }
	  },
	  methods:{	  	  		
	  		showPopup() {
		      this.show = true;
		    }			  	  
	  }
}
</script>

<style scoped>
 h3 {
	  font-weight: normal;
	  color:blue;
	}
 a {
		color:#42b983;
	}
.van-cell__title{
	text-align:left

}
</style>

3.template可以for循环

<template>
    <div class="root">

        <template v-for="item,index in 5">
            <div>测试{{index}}</div>
        </template>

    </div>
</template>