cdn引入vant框架使用在html页面使用

<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>

<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>
}

posted @ 2020-08-19 10:41 net开发人员阅读(10290) 评论(0) 编辑收藏举报

刷新页面返回顶部

it写代码

cdn引入vant框架使用在html页面使用

公告