vue html template模板使用以及引用

最新推荐文章于 2025-03-23 00:40:29 发布

汽水猫

最新推荐文章于 2025-03-23 00:40:29 发布

阅读量4.8k

点赞数

本文链接：https://blog.youkuaiyun.com/f1370335844/article/details/102632595

版权

这篇博客介绍了如何在Vue.js应用中使用HTML模板，通过示例展示了如何创建一个新的Vue实例，并在其中定义`template`属性，包含`van-dropdown-menu`和`van-dropdown-item`组件。数据部分定义了`value1`、`value2`以及相关的选项数组。同时，提供了在HTML页面中引用这些模板的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的直接使用template:

<div id="app">

</div>

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

在html页面中引用template:

参考：https://www.cnblogs.com/jiguiyan/p/10757984.html

<div id="app">
    <my-component-b></my-component-b>
    <div style="clear: both"></div>
    <van-cell-group style="margin-top: 15px">
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <div>
                <div class="s1">任务名称</div>
                <div class="s1">任务状态</div>
            </div>
            <div v-for="item in list"
                 :key="item.id" style="border-bottom: 1px solid #f0f3f6;">
                <div class="s2">
                    <div style="height: 5px"></div>
                    <span >{{item.name}}</span>
                </div>
                <div class="s3"><div></div><span>{{item.bl}}</span></div>
            </div>
        </van-list>
    </van-cell-group>
</div>

var vm = new Vue({
    el: "#app",
    components:{
        "my-component-b":{
            template:`<van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" @change="refresh" />
   <van-dropdown-item v-model="value2" :options="option2" @change="refresh" />
   </van-dropdown-menu>`,
            data(){
                return{
                    value1: 0,
                    value2: 'a',
                    option1: [
                        { text: '全部商品', value: 0 },
                        { text: '新款商品', value: 1 },
                        { text: '活动商品', value: 2 }
                    ],
                    option2: [
                        { text: '默认排序', value: 'a' },
                        { text: '好评排序', value: 'b' },
                        { text: '销量排序', value: 'c' },
                    ],
                }
            },
            methods:{
                refresh(value){
                    console.log(this.$parent.query(value));
                    console.log(value);
                }
            }
        }
    },
    data: {
        tableData: [],
        currentPage: 1,
        list: [],
        loading: false,
        finished: false,
    },
    methods: {
        query(value){
            console.log(value);
        },
        onLoad(){
            this.list = [];
            this.loading = false;
            this.finished = true;
        }
    },
    mounted: function () {


    }
})