Vue使用

最新推荐文章于 2024-05-17 12:28:02 发布

Sonny船长

最新推荐文章于 2024-05-17 12:28:02 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

分类专栏：网站相关文章标签： vue.js

本文链接：https://blog.csdn.net/Tony6666_/article/details/113886736

网站相关专栏收录该内容

20 篇文章

订阅专栏

<!--P7 结束-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue-1</title>
    <style>
        @import "../css/boxs.css";
    </style>
</head>
<body>
    <div class="box1" id="b1">
        <!--view层 模板-->
        <div id="ISIS">                                      <!--判断-->
            {{message}}
            <span v-bind:title="message">鼠标悬停</span>
        </div>
    </div>

    <div class="box2" id="b2">
            <div id="choose">                                <!--分支-->
                <h2 v-if="ok">Boolean可以</h2>
                <h2 v-else>Boolean不可以</h2>
                <h3 v-if="A==='AAA'">String可以</h3>
                <h3 v-else>String不可以</h3>
            </div>
    </div>

    <div class="box3" id="b3">
            <div id="forEach">                               <!--循环-->
                <li v-for="(item,index) in items">{{item.message}}--{{index}}</li>
            </div>
    </div>

    <div class="box4" id="b4">

    </div>

    <div class="box5" id="b5">

    </div>

    <div class="box6" id="b6">

    </div>

<!--script导入Vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var mv = new Vue({
        el:"#ISIS",
        //Model:数据
        data:{
            message:"hello Vue!"
        }
    })

    var choose = new Vue({
        el:"#choose",
        data:{
            ok: false,
            A: "AAA",
        }
    })

    var forEach = new Vue({
        el:"#forEach",
        data: {
            items:[
                {message:'Sonny'},{message:'Candy'},{message:'Peter'}
            ]
        }
    })
</script>
</body>
</html>