<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script> <script> // 在 #app 標簽下渲染一個按鈕組件 new Vue({ el: '#app', template: '#counter-template', data: { items: [{ text: '分組 1', children: [{ id: 1, text: '1' }, { id: 2, text: '2' }, { id: 3,text: '3'}] }, { text: '分組 2' }], activeId: 1, activeIndex: 0, show: false, }, }); // 調用函數組件，彈出一個 Toast vant.Toast('提示'); // 通過 CDN 引入時不會自動注冊 Lazyload 組件 // 可以通過下面的方式手動注冊 Vue.use(vant.Lazyload); Vue.use(vant.Button); Vue.use(vant.TreeSelect); </script>
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> </head> <body> <div id="app"> </div> </body> </html>
<template id="counter-template"> <div> <van-button type="primary" @@click="show=true">顯示遮罩層</van-button> <van-overlay :show="show" @@click="show=false"> <div class="wrapper" @@click.stop> <div class="block"> <van-tree-select :items="items" :active-id.sync="activeId" :main-active-index.sync="activeIndex" /> </div> </div> </van-overlay> </div> </template>
net mvc 中使用
@{ ViewBag.Title = "找工作"; } <h2>找工作</h2>
<div id="app">
<!-- 模板 -->
</div>
<template id="counter-template">
<div class="goods">
<van-swipe class="goods-swipe" :autoplay="3000">
<van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
<img :src="thumb">
</van-swipe-item>
</van-swipe>
<van-cell-group>
<van-cell>
<div class="goods-title">{{ goods.title }}</div>
<div class="goods-price">{{ formatPrice(goods.price) }}</div>
</van-cell>
<van-cell class="goods-express">
<van-col span="10">運費：{{ goods.express }}</van-col>
<van-col span="14">剩余：{{ goods.remain }}</van-col>
</van-cell>
</van-cell-group>
<van-cell-group class="goods-cell-group">
<van-cell value="進入店鋪" icon="shop-o" is-link @@click="enterShop">
<template slot="title">
<span class="van-cell-text">有贊的店</span>
<van-tag class="goods-tag" type="danger">官方</van-tag>
</template>
</van-cell>
<van-cell title="查看商品詳情" is-link @@click="showGoodsDetail" />
</van-cell-group>
<van-goods-action>
<van-goods-action-icon icon="chat-o" @@click="showChat">
客服
</van-goods-action-icon>
<van-goods-action-icon icon="cart-o" @@click="showCart">
購物車
</van-goods-action-icon>
<van-goods-action-button type="warning" @@click="addCart">
加入購物車
</van-goods-action-button>
<van-goods-action-button type="danger" @@click="buy">
立即購買
</van-goods-action-button>
</van-goods-action>
</div>
</template>
@section styles{ <!-- 引入樣式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css"> <!-- 自定義樣式 --> <style> body { color: #333; background-color: #f8f8f8; } .goods { padding-bottom: 50px; } .goods-swipe img { width: 100%; display: block; } .goods-title { font-size: 16px; } .goods-price { color: #f44; } .goods-express { font-size: 12px; padding: 5px 15px; } .goods-cell-group { margin: 15px 0; } .goods-tag { margin-left: 5px; } </style> } @section scripts{ <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script> <script> // 初始化 Vue 實例 new Vue({ el: '#app', data() { return { goods: { title: '美國伽力果（約680g/3個）', price: 2680, express: '免運費', remain: 19, thumb: [ 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg', 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg' ] } }; }, methods: { formatPrice() { return '¥' + (this.goods.price / 100).toFixed(2); }, enterShop() { vant.Toast('進入店鋪'); }, showGoodsDetail() { vant.Toast('查看商品詳情'); }, showChat() { vant.Toast('進入客服頁面'); }, showCart() { vant.Toast('進入購物車頁面'); }, addCart() { vant.Toast('加入購物車'); }, buy() { vant.Toast('立即購買'); } } }); </script> }