2022-07-04 a354992efe1f97637c01246495b1812b 99+ 2 分钟 0.3 k0次访问

html使用vue模版

摘要
点击查看更多

————————————————
版权声明：本文为CSDN博主「爱学习的ljz」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40600414/article/details/108246826

创建js

tem-tabs.js

//定义组件注册的模板template
var tabs = `<div >
                  <el-tabs v-model="index"  @tab-click="handleClick">
                    <el-tab-pane v-for="(item,i) in list" :label="item.label" :name="i">{{item.content}}</el-tab-pane>
                  </el-tabs>
            </div> `;
//Vue定义组件
var template_tabs = Vue.extend({
        template:tabs,
        //这里的data与vue对象的data类似，只不过组件中的data必须是函数的形式
        data(){
            return {
                index:0,
            }
        },
    //这里的methods与vue对象的methods一样，可以在这里定义组件的函数 没用到也可以不写
        methods:{
            handleClick:function(tab,event){
                console.log(tab,event);
            }
        },
        //props用来接收外部参数的
        props:['index','list'],
});

//Vue注册全局组件
Vue.component('tem-tabs',template_tabs);

Component.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义组件测试</title>

    <link rel="stylesheet" href="css/element-ui.css">
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui.js"></script>

    <script src="js/template/tem-tabs.js"></script>   <!--引入定义组件的技术文件-->

</head>
<body>
    <div id="app">
        <tem-tabs :index="1" :list="parentList" ></tem-tabs>
    </div>
    <script>
        var myVue = new Vue({
            el: '#app',
            data:{
                parentList:[
                    {label:'玄幻小说',content:'圣墟'},
                    {label:'武侠小说',content:'雪中悍刀行'},
                    {label:'都市小说',content:'天才相师'},
                    {label:'鬼怪小说',content:'盗墓笔记'},
                ],
            },
            methods:{
                handleClick:function (tab,event) {
                       console.log(tab);
                }
            }
        });
    </script>
</body>
</html>

动态图片

1	:src="require(`../assets/${getImagePath(cardItem)}`)"

html使用vue模版

http://example.com/2022/07/04/learn/language/js/vue/html-use-vue-template/

作者

声控周不鸽

发布于

2022-07-04

更新于

2023-01-18

html使用vue模版

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

链接

最新评论

最新文章

分类

归档

标签

订阅更新