简单例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
    <style>

    </style>
</head>

<body>
    <div id="vue">
        <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="option">
            </van-dropdown-item>
            <van-dropdown-item title="筛选" ref="item">
                <van-cell-group>
                    <van-switch-cell v-model="switch1" title="包邮" />
                </van-cell-group>
                <van-cell-group>
                    <van-switch-cell v-model="switch2" title="团购" />
                </van-cell-group>
                <van-button block type="info" @click="onConfirm">确认</van-button>
            </van-dropdown-item>
        </van-dropdown-menu>
    </div>

</body>
<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 src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
    new Vue({
        el: '#vue',
        data() {
            return {
                value: 0,
                switch1: false,
                switch2: false,
                option: [
                    { text: '全部商品', value: 0 },
                    { text: '新款商品', value: 1 },
                    { text: '活动商品', value: 2 }
                ]
            }
        },
        mounted() {
        },
        methods: {
            onConfirm() {
                this.$refs.item.toggle();
            }
        }
    });


</script>


</html>

 

一、template简单使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <!--此处页面显示hello-->
    <div id="app"></div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello",
                flag:true
            },
            template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有一个根元素,如果有多个需要使用v-if、v-else、v-else-if来选择显示哪一个
        });
    </script>
</head>
<body>
</body>
</html>

注意 template内不能单独访问{{mes}},外层必须放入div等其他元素标签

然后换一种属性指定方式

<!DOCTYPE html>
<html>
<head>
    <title></title>
     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<!--此处页面显示hello-->
<div id="app"></div>

<!--此处template标签必须在vue绑定的元素外面定义,并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>

<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },
        template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容,并且在查看dom结构时没有template标签
    });
</script>

</body>
</html>

2、vant的示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- 引入jq文件 -->
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <!-- 引入 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.4/lib/vant.min.js"></script>

<!--此处页面显示-->
<div id="app"></div>

<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:'',
            flag:true
        },
        template:'<van-button type="warning">警告按钮</van-button>'
    });
</script>

</head>
<body>

</body>
</html>

3、改进使用组件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- 引入jq文件 -->
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <!-- 引入 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.4/lib/vant.min.js"></script>

<!--此处页面显示-->
<div id="app"></div>

<script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:'',
            flag:true,
            value1: 0,
              value2: 'a',
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 }
            ],
              option2: [
                { text: '默认排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
              ]
        },
        template:'<van-dropdown-menu><van-dropdown-item v-model="value1":options="option1" /><van-dropdown-item v-model="value2" :options="option2" /></van-dropdown-menu>'
    });
</script>

</head>
<body>

</body>
</html>

如图:

vue.js格式使用vant-页面引入_jquery

 有个错误

<!DOCTYPE html>
<html>
<head>
    <title></title>

      <!-- 引入jq文件 -->
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <!-- 引入 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.4/lib/vant.min.js"></script>

    <!--此处页面显示hello-->
    <div id="app"></div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:'<van-button type="warning">警告按钮</van-button>',
                flag:true
            },
            template:"<div>{{msg}}</div>"//
        });
    </script>
</head>
<body>
</body>
</html>

这种只能直接输出字符串,识别不了van标签,这是因为渲染一次过,template属性内容加载的时候,会识别渲染,但是内部的变量不会经过vue渲染,仅仅当作字符串输出

 

换种属性指定方式:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

    <!-- 引入 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.4/lib/vant.min.js"></script>

</head>
<body>
    <div id="app">
       
    </div>
    <!--此处template标签必须在vue绑定的元素外面定义,并且在页面中不显示下面的template标签中的内容-->
    <template id="first">
        <div v-if="flag"><van-button type='warning'>警告按钮</van-button><div>
        <div v-else>111<div>
    </template>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello",
                flag:true
            },
            template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容,并且在查看dom结构时没有template标签
        });
    </script>
</body>
</html>

这种元素标签必须先写好,变量的方式是最好的,可以获取随意指定。

 

遮罩层

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <!-- 清除缓存 -->
    <meta http-equiv="cache-control" content="no-cache">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">

    <!-- 引入 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.5/lib/vant.min.js"></script>

    <style>
        .wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .block {
            width: 120px;
            height: 120px;
            background-color: #fff;
        }
    </style>
    <script type="text/javascript">
    </script> 
</head>
<body>
    <div id="app"> </div>
    <!--不能直接放入这里-->
    <!---->
    <!--此处template标签必须在vue绑定的元素外面定义,并且在页面中不显示下面的template标签中的内容-->
    <template id="first">
        <!--container f12查看属性-->
        <div class="container">
            <van-button type="primary" @click="onClickShow">显示遮罩层</van-button>
            <van-overlay :show="show" @click="onClickHide">
                <div class="wrapper"  >
                    <div class="block"  @click.stop>ssssssssssssss</div>
                </div>
              </van-overlay>
        </div>
    </template>
    <script>
    
    let vm = new Vue({
        el: "#app",
        data: {
            show: false,   
        },methods: {
            onClickShow() {
                this.show=true;
                console.log(this.show);
            },onClickHide() {
                this.show=false;
                console.log("onClickHide",this.show);
            }
        },template: "#first" //通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容,并且在查看dom结构时没有template标签        
        ,created() {//Vue 初始化的默认载入事件
            
        },
    });
    </script>
</body>

</html>

弹出层

 

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <!-- 清除缓存 -->
    <meta http-equiv="cache-control" content="no-cache">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">

    <!-- 引入 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.5/lib/vant.min.js"></script>

    <style>
        .wrapper {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            padding: 3rem 1rem 1rem 1rem;
        }
        .block {   
            background-color: #fff;
        }

        /* 
        /* name - string,用于自动生成 CSS 过渡类名。例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等。默认类名为 "v" */
        /* 使用transition="fade" */
        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        /*
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        */
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: scale(0);
                position: fixed;
                top: 0%;
                left: 0%;
            }
            50% {
                transform: scale(1.2);
                position: fixed;
                top: 0%;
                left: 0%;
            }
            100% {
                transform: scale(1);
                position: fixed;
                top: 0%;
                left: 0%;

            }

        }
    </style>
    <script type="text/javascript">
    </script> 
</head>
<body>
    <div id="app"> </div>
    <!--不能直接放入这里-->
    <!---->
    <!--此处template标签必须在vue绑定的元素外面定义,并且在页面中不显示下面的template标签中的内容-->
    <template id="first">
        <!--container f12查看属性-->
        <div class="container">

            <van-cell is-link @click="showPopup">展示弹出层</van-cell>

            <van-popup
            v-model="show"
            transition="bounce"

            :overlay="false"
            closeable
            close-icon-position="top-right"

            :style="{ height: '100%',width: '100%'  }"
            >

                <div class="wrapper">
                    <div class="block">
                

                 在调研的日子里,我常常被一些事情揪心感动着。那高大的一座座山峰,遮掩了无数淳朴厚道的人们。因为透露出一股子红高粱一般的淳朴味,使我在这里的三十多个日日夜夜,感觉不到丝毫的恐惧和担忧。陇南人十分好客,他们面对陌生的外来客,总会挥起自己那宽大的手掌,用微笑示意。之所以这样,我才有更多的机会,接触到那些陌生的同行,尤其是他们原始般的爱情,在一种纯朴中流露出一丝丝让人始终割舍不掉的激动,这里,我就要讲述几个教师之间的一段爱情故事。

                  (1)
                
                  那是一个晴朗无风的早晨,根据事先电话预约,我被一个县教育局的股长领着,来到了这所小学”。这是一个规模相对较大的学校,教学楼面目显得十分陈旧,四层高,校园里四周全部栽着花椒树,陪同我的小谢对我说:“这是花椒树的盛产区,学校也不例外。”
                
                  我们一到这所学校,只见三名中年教师已经站在校门口迎候,谢股长慌忙给我介绍:“这位是张校长,这位是刘主任、汪主任。”我们一一握手,之后,他们把我们带入一间不大的房子里,桌子上已经摆放着水果和饮料之类的东西,我们攀谈起来,无非都是关于学校规模的事情。
                
                  早饭过后,谢股长告辞回局里了。我对张校长说:“你们忙吧,我一个人走走看看。”她也没有推辞,欣然同意了我的要求。
                
                  中午第一节课已经上了,我在校园里溜达,看看文化长廊,突然,我发觉身后有人,回头一看,只见一个年轻小伙子,他长得很帅气,一双水盈盈的大眼睛里,包含着十分勾人心魂的魅力。他穿着与众不同,可是,让人感觉不到衣着的奇异,这或许是衣着和他的体型特般配的原因呗。
                
                  他主动和我打招呼:“你好,领导,听说,你从省厅来的?”
                
                  “呵呵,是呀。”我主动和他握手。
                
                  他突然缩了缩手,最终还是很勉强地伸出手。
                
                  我问:“你的贵姓?”
                
                  “叶子男,湖北武昌人,半年前来这里支教。”他的话语很流利,口齿清楚。
                
                  “噢,原来这样。”我接着问:“在这里习惯呗?”
                
                  “哦?”他轻轻地叹了口气,说:“习惯。”我分明看出他对这里很不满足。
                
                  我和他聊了一会儿,不知道张校长在那里看见我们,她走过来,对叶子男说:“叶子,带领导到你的办公室里坐坐。”这时,叶子男不住地自责自己:“我怎么这么愚笨,不通人情。”我急忙说,没关系的。
                
                  这所学校,房子很宽裕,每一间房子,估计有24平方大小,只分配一个教师办公。我走进他的办公室,只见桌子上存留着食品袋,不大的木板床上,被子摆放得整整齐齐,一个特别大的布娃娃,笑盈盈地斜躺在床头。在办公桌上,立着一面书本大小的镜框,里面夹着一张照片:一个俊秀的姑娘,我问他:“这是你的女朋友,长得很漂亮?”
                
                  他笑了笑,看来已经默认了。
                
                  叶子男给我倒茶,突然,门外又来了一名教师,叶子男出去了。我听他两悄悄地再说话:“校长吩咐了,今天下午,你可以不上课,陪同领导。招待的东西在这里。”叶子男又进来了,只见他手里拎着一大包水果之类的东西。
                
                  (2)
                
                  叶子男对我讲述了半年前的事情。
                
                  他毕业于西北师大,因为一些变故,毕业后在家里呆了一段时间,几个同学说,甘肃陇南市支教,他一时意气奋发,报了名,没过几天,聘任合同就下来了。说实话,当时,父母皆不同意,他们主要担心这里条件太艰苦了,山大沟深,交通也不便利,和武昌相比,简直是天上地下。可是,当时他想,年轻人吗,到艰苦的地方锻炼,也是一件好事。父母拗不过他,不得已也就顺从了他。
                
                  荣幸的是,叶子男在西北师大学习了四年,对甘肃很熟悉,初次到陇南,父母很放心。他一个人来,陇南市教育局考虑的也很周全,把他安排在一所距离县城很近的学校,这一点,他十分感激教育局的领导。
                
                  叶子男给我介绍了这一切,神情显得有些忧郁。
                
                  我问:“支教一年后,打算如何?”
                
                  “还没考虑。”他回答的很爽快。
                
                  我又问:“在这半年,你感到一生难忘的有那些事情?”
                
                  “只有一件,就是这里年轻教师的婚姻问题。”
                
                  我一听,感到不解,他接着说:“因为爱情,好多年轻教师之间恩恩怨怨、是是非非,使学校领导苦恼呀。”
                
                  “是呀,年轻人的婚姻,是一辈子的大事,因为婚姻揪心也是人之常情。”我说。
                
                  他坐下来,从抽屉里拿出一本影集,给我看。我一边看,他站在一旁介绍,里面有十多个姑娘靓丽的照片,我当时心想:叶子男保存着这,莫非这些姑娘是他的同学?
                
                  叶子男问我:“你知道吗,这些姑娘一个个追求过我,最后,一个个含恨离开了这所学校。”
                
                  我感到很惊诧,仅仅半年,叶子男尽然和十多个姑娘谈恋爱,难道他把心思全没放在工作上呀,我考虑再三,把这种想法没有说出来,害怕叶子男产生心理负担,因为我是省厅下来的,有时一句话可能会使一个教师担忧好多天。为此,我每到一所学校,说话很谨慎。
                
                  叶子男是一个机灵人,不打自招,问我:“难道你不感到奇怪,半年时间,这么多的姑娘和我谈情?”
                
                  我笑了笑,一句话没有说。
                
                  (3)
                
                  叶子男从中取出一张照片,只见是一个披着一头拉直了乌发的姑娘,一张秀气的脸,可惜,眼睛小了点。他对我说:“你瞧,这个姑娘是我的第一个初恋。”
                
                  人都是这样,凡事第一次总是刻骨铭心。我问:“她现在?”
                
                  于是,叶子男娓娓给我讲述了他和这个姑娘的一段恋情。
                
                  “老师们都叫她瑶瑶,她也是师大毕业,比我早半年到这所学校,家在青海,生于天津,父亲在地质勘探局工作,母亲是一名医生。她不是支教的,分配来的,或许是她命运不好,一个响当当的师大毕业生,竟然分配到这偏僻的小学。”
                
                  我插了一句:“现在不分配了吗?”
                
                  “哦?在这里,凡是师大毕业生照样分配。你可能要问:她为什么不回青海,到这里不是她的初衷。当初填写分配志愿时,她的一个男朋友是四川广安的,距离陇南很近,她就选择了陇南。”
                
                  “她到这里仅仅不到一月,男朋友不幸遇到车祸丧生。从此,她神思恍惚,心理无法承受,半年后,我到这里,她或许把对男朋友的思念转嫁到我的身上,可能,生活很会捉弄人,张校长担心瑶瑶出事,害怕给学校惹麻烦,在平时安排工作或者外出参观培训,故意把瑶瑶和我安排在一起。频繁的接触,两颗年轻的心就不由自主地碰撞在一起。”
                
                  “实话说,我当初不愿意和她交往。我不是嫌弃她长得不太漂亮,而是,我对她以前的那段恋情,总有想法。一个人一旦受到过一次打击,第二次这个人的疑虑就会增多,我渴求一段纯真的爱情。尽管她和我在一起,她不经意间给我暗示,体贴照顾我的生活,可是,我和她只是一种淡淡的相处。”
                
                  “爱情的力量,有时人是无法抑制住内心的一次次克制。她终于控制不住内心的煎熬,在一天下午放学后,她主动约我去爬山,在上山的过程中,她或许故意跌倒,我不由自主地把她拉起来,突然,她紧紧地抱住我。当时,不知怎么,我无动于衷。一段时间后,她渐渐地松开了手,回头独自走了。我紧紧地呼唤她,想给她解释,可是,她头也没会地走了。”
                
                  “那天晚上,我好几次从房间里出来,看看她办公室里的灯光一直彻夜亮着,我一夜未眠,总感觉到好像亏欠了她什么,过后几天,在校园里我碰见她,她低头不语,有几次,我想和她好好谈一谈,可惜,她总不给我解释的机会,就这样,我和她的这段看似恋情却不是恋情,来也匆匆,去也匆匆。”
                
                  叶子男说着说着,神情显得十分忧郁。我问他:“瑶瑶现在还在这所学校吗?”
                
                  “哦?她已经离开了人世。”
                
                  “哎呀,怎么会这样?原谅我提起了你们过去这一段伤心的事情。”
                
                  叶子男继续说:“瑶瑶和我那段关系破裂以后,从此,她总是独来独往。张校长找我谈了几次话,我也试图努力和她好好谈谈。好几次,她把我拒之门外,就是不和我说一句话。”
                
                  “后来,她提交了辞职申请,好歹教育局了解了实情,把她调到了另外一所学校。上个月,她吃了过量的安眠药,离开了人世。现在我一想起她,内心里不由地感到一阵阵颤动。”
                
                  【言外话】教师所处的环境注定了教师的交往十分有限,教师也是人,是人就有情感的需要,满足教师的情感渴求也是做好教育工作的前提之一。教师一般对自己的言行很矜持,不善于表露,自尊心很强,据我了解,因为婚姻,教师自杀、外出的也很多,这将会影响到学校的教育工作。如何正确看待和合理处理好年轻教师的婚姻,这是每一个学校管理工作者应该思考的问题。
                
                  (4)
                
                  叶子男又取出另外一张姑娘的照片,只见这是一个穿着十分时髦的女人。
                
                  “这个姑娘名叫杨奇,甘肃白银人,也是一名大学生。她和我认识很早,我到这里支教,她是因我而来。当教师不是她的心愿。她的愿望想当一名模特,爱情的魅力是巨大的,因为爱,就把她牢牢地牵到了这里。”
                
                  “她看上我,是因为我长得帅气。还有,我喜欢拉二胡,这也是她喜欢我的原因之一。她的爸爸在兰州工作,熟人关系硬,把她安排在陇南市市委工作。”
                
                  “你们现在还?”我插了一句。
                
                  “她成了一名市委领导的官太太了。”叶子男的语气有些愤恨。
                
                  “这很正常,有时,权力威慑胜过情感的力量。”我说。
                
                  “我为她,付出了很多。这里,我告诉你一个秘密:一年前,我们在兰州就住在一起,这就是她所说的恋爱前的试婚,试婚过后,面临的是恋爱期间的冷淡,她认为:婚姻就如同一只碗上搁了一双筷子,饿了的时候,随手夹一口饭食。只有婚前期,才是最美丽、最感动的时期。”
                
                  “那时,我们住在一起,房费、生活费还有她购买的高档化妆品,全由我负担。她总是认为,女人之所以嫁给男人,就是为了花男人的钱。尽管她这样,我还是很爱她。”
                
                  “这或许就是男人的一种天大的错误,男人喜欢花心的女人。结果,我们相处了一年之久,她和我一同来到这里,她进入市委,开始变心了。因为,我缺少的是权力,缺少的是金钱,帅气已经没有价值了。她为了权力和金钱,嫁给了另外一个男人。她结婚的那天,给我发了一则短信:我一辈子还是爱你,忘不了你。今天,我嫁给了一个我不喜欢的男人,我愿意,因为这个男人带给了我荣华富贵,可以满足我的一切,可是,你办不到,因为,你是教师。”
                
                  “后来,我对此想不通,总想寻找机会,报复她。经过几个朋友劝说,为了这样一个女人,不值得这样去做。”
                
                  【言外话】教师的社会地位是不是就决定了教师的婚姻状况?从杨奇的身上,可以看到教师婚姻悲哀的一面。为了权力和金钱,抛却了真正的情感,这一点就启迪每一个年轻教师要慎重地对待自己的婚姻,尤其要全方位地审视自己心目中的恋人。在当今这个物欲横流的社会,情感的震慑力已经不是很大,是男是女,重视现实是关键。恋爱的前提之一,必须要考虑到是不是很现实。不要因为一时的海誓山盟般的承诺而毁了自己幸福的一生。
                </div>  
            </div>   
  
        </van-popup>

        </div>
    </template>
    <script>
    
    let vm = new Vue({
        el: "#app",
        data: {
            show: false,   
        },methods: {
            showPopup() {
                this.show=true;
                console.log(this.show);
            },onClose() {
                this.show=false;
                console.log("onClickHide",this.show);
            }
        },template: "#first" //通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容,并且在查看dom结构时没有template标签        
        ,created() {//Vue 初始化的默认载入事件
            
        },
    });
    </script>
</body>

</html>

弹框

提示

加载

通知

 

逻辑商品

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <!-- 清除缓存 -->
    <meta http-equiv="cache-control" content="no-cache">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">

    <!-- 引入 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.5/lib/vant.min.js"></script>

    <style>
        .wrapper {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            padding: 3rem 1rem 1rem 1rem;
        }
        .block {   
            background-color: #fff;
        }

        /* 
        /* name - string,用于自动生成 CSS 过渡类名。例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等。默认类名为 "v" */
        /* 使用transition="fade" */
        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        /*
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        */
        .bounce-enter-active {
            animation: bounce-in .3s;
        }
        .bounce-leave-active {
            animation: bounce-in .3s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: scale(0);
                position: fixed;
                top: 0%;
                left: 0%;
            }
            50% {
                transform: scale(1.2);
                position: fixed;
                top: 0%;
                left: 0%;
            }
            100% {
                transform: scale(1);
                position: fixed;
                top: 0%;
                left: 0%;

            }

        }
    </style>
    <script type="text/javascript">
    </script> 
</head>
<body>
    <div id="app"> </div>
    <!--不能直接放入这里-->
    <!---->
    <!--此处template标签必须在vue绑定的元素外面定义,并且在页面中不显示下面的template标签中的内容-->
    <template id="first">
        <!--container f12查看属性-->
        <div class="container">

           
            <!--v-model→是否显示sku-->
            <!--:sku→商品sku数据-->
            <!--:goods→商品信息-->
            <!--:goods-id→商品id-->
            <!--:quota→限购数,0 表示不限购-->
            <!--:quota-used→已经购买过的数量-->
            <!--:hide-stock→是否显示商品剩余库存-->
            <!--:message-config→留言相关配置-->

            <van-sku
            v-model="show" 
            :sku="sku"
            :goods="goods"
            :goods-id="goodsId"
            :quota="quota"
            :quota-used="quotaUsed"
            :hide-stock="sku.hide_stock"
            :message-config="messageConfig"
            @buy-clicked="onBuyClicked"
            @add-cart="onAddCartClicked"
            >
            </van-sku>


        </div>
    </template>
    <script>
    
    let vm = new Vue({
        el: "#app",
        data: {
            show: true,
            goodsId:"1",
            quota:0,
            quotaUsed:3,
            sku: {
                // 数据结构见下方文档

                // 所有sku规格类目与其值的从属关系,比如商品有颜色和尺码两大类规格,颜色下面又有红色和蓝色两个规格值。
                // 可以理解为一个商品可以有多个规格类目,一个规格类目下可以有多个规格值。
                tree: [
                    {
                        k: '颜色', // skuKeyName:规格类目名称
                        v: [
                            {
                                id: '30349', // skuValueId:规格值 id
                                name: '红色', // skuValueName:规格值名称
                                imgUrl: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1281982941,672088714&fm=26&gp=0.jpg', // 规格类目图片,只有第一个规格类目可以定义图片
                                previewImgUrl: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1281982941,672088714&fm=26&gp=0.jpg', // 用于预览显示的规格类目图片
                            },
                            {
                                id: '1215',
                                name: '蓝色',
                                imgUrl: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1251897094,46264818&fm=26&gp=0.jpg',
                                previewImgUrl: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1251897094,46264818&fm=26&gp=0.jpg',
                            }
                        ],
                        k_s: 's1' // skuKeyStr:sku 组合列表(下方 list)中当前类目对应的 key 值,value 值会是从属于当前类目的一个规格值 id
                    }
                ],
                // 所有 sku 的组合列表,比如红色、M 码为一个 sku 组合,红色、S 码为另一个组合
                list: [
                    {
                        id: 2259, // skuId,下单时后端需要
                        price: 101110, // 价格(单位分)
                        s1: '30349', // 规格类目 k_s 为 s1 的对应规格值 id
                        stock_num: 110 // 当前 sku 组合对应的库存
                    },{
                        id: 2259, // skuId,下单时后端需要
                        price: 301110, // 价格(单位分)
                        s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                        stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '1.00', // 默认价格(单位元)
                stock_num: 227, // 商品总库存
                collection_id: 2261, // 无规格商品 skuId 取 collection_id,否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                messages: [
                    {
                    // 商品留言
                    datetime: '0', // 留言类型为 time 时,是否含日期。'1' 表示包含
                    multiple: '0', // 留言类型为 text 时,是否多行文本。'1' 表示多行
                    name: '留言', // 留言名称
                    type: 'text', // 留言类型,可选: id_no(身份证), text, tel, date, time, email
                    required: '1' // 是否必填 '1' 表示必填
                    }
                ],
                hide_stock: false // 是否隐藏剩余库存

            },
            goods: {
                // 数据结构见下方文档
                // 商品标题
                title: '测试商品',
                // 默认商品 sku 缩略图
                picture: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg'
            },
            messageConfig: {
                                // 数据结构见下方文档
                                // 自定义限购文案
                quotaText: '每次限购xxx件',
                // 自定义步进器超过限制时的回调
                handleOverLimit: (data) => {
                    const { action, limitType, quota, quotaUsed, startSaleNum } = data;

                    if (action === 'minus') {
                    Toast(startSaleNum > 1  ? `${startSaleNum}件起售` : '至少选择一件商品');
                    } else if (action === 'plus') {
                    // const { LIMIT_TYPE } = Sku.skuConstants;
                    if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
                        let msg = `单次限购${quota}件`;
                        if (quotaUsed > 0) msg += `,你已购买${quotaUsed}`;
                        Toast(msg);
                    } else {
                        Toast('库存不够了');
                    }
                    }
                },
                // 步进器变化的回调
                handleStepperChange: currentValue => {},
                // 库存
                stockNum: 1999,
                // 格式化库存
                stockFormatter: stockNum => {},
            }
        },methods: {
            onBuyClicked(skuData ){
                console.log("击购买回",skuData);
            },
            onAddCartClicked(skuData )
            {
                console.log("添加购物车",skuData);
            }
        },template: "#first" //通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容,并且在查看dom结构时没有template标签        
        ,created() {//Vue 初始化的默认载入事件
            
        },
    });
    </script>
</body>

</html>

 

点到为止