最常用的前端

最新推荐文章于 2023-12-23 14:54:51 发布

礼礼。

最新推荐文章于 2023-12-23 14:54:51 发布

阅读量107

点赞数

分类专栏： js H5 文章标签： h5 vue

本文链接：https://blog.csdn.net/weixin_45736311/article/details/124340705

版权

js 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta NAME="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .sign{
            color: crimson;
        }
        .divShow{
            background-color: #ccc;
            width: 300px;
            height: 100px;
        }
    </style>
</head>

<body>

<div id="app">
<!--全局组件-->
    <p class="sign">全局组件</p>
    <my-header></my-header>
    <hr/>
<!--局部组件-->
    <p class="sign">局部组件</p>
    <my-child></my-child>
    <hr/>
<!--数据绑定-->
    <p class="sign">1.数据绑定</p>
    {{ name }}
    <br />
<!--双向数据绑定:v-model="name"-->
    <input type="text" v-model="name" />
    <hr />
<!--复选框的数据绑定，显示与否-->
    <p class="sign">2.复选框的数据绑定，显示与否</p>
    {{showDive}}
    <input type="checkbox" v-model="showDive" />
    <div v-if="showDive" class="box"><p>此处绑定了复选框，当选定时 样式呈现，否则隐藏</p></div>
    <br />
    <hr/>
<!--v-for 计算属性-->
    <p class="sign">3.v-for 计算属性</p>
    <ul>
        <li v-for="item in allIndex">{{item}}</li>
    </ul>
    <hr/>
<!--vue点击事件-->
    <p class="sign">4.点击事件（显示与隐藏）</p>
    <button @click="btnClick">{{ btnText }}</button>
    <div class="divShow" v-if="isShow"></div>

</div>

<script type="text/javascript">
    Vue.component("my-header",{
        template:"<h1>全局组件</h1>"
    })
    var app = new Vue({
        el:"#app",
        data:{
            name:"aaaaaa",
            showDive:true,
            persons:[
                {index:"111",group:[{name:"11a"}]},
                {index:"222",group:[{name:"22a"}]},
                {index:"333",group:[{name:"33a"}]},
                {index:"444",group:[{name:"44a"}]}
            ],
            isShow: true,
            btnText:"显示"
        },
        methods:{
            btnClick:function(ev){
                // alert(ev.target.innerText);
                this.isShow = !this.isShow;
                this.btnText = (this.isShow)?"隐藏":"显示"
            }
        },
        computed:{
            allIndex: function(){
                var list = [];
                for(var i in this.persons){
                    var oneGroup = this.persons[i];
                    list.push(oneGroup.index)
                }
                return list;
            }
        },
        components:{
            "my-child":{
                template: "<h3>子组件</h3>"
            }
        }
    })
</script>

</body>
</html>

礼礼。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
最常用的前端

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta NAME="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>Title</title> <script src="https://cd.
复制链接

扫一扫