2.0、Vue的基本语法

最新推荐文章于 2023-02-27 21:19:35 发布

澜色海湾

最新推荐文章于 2023-02-27 21:19:35 发布

阅读量103

点赞数

分类专栏： vue学习总结文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_52433668/article/details/123165282

版权

vue学习总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

2.0、Vue的基本语法

本节内容主要介绍一下if、for、还有事件的绑定

if和else if和else语法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuetest2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<div id="app1">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<script>
    var vm = new Vue({
        el:"#app1",
        data:{
            type: 'A'
        },
    });

</script>

</body>
</html>

For循环显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuetest2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<div id="app1">
    <h1 v-for="(item,index) in items">
        {{item.msg}}--{{index}}
    </h1>
</div>

<script>
    var vm = new Vue({
        el:"#app1",
        data:{
            items: [
                {msg: "英雄联盟"},
                {msg: "三国演义"},
                {msg: "水浒传"}
            ]
        },
    });

</script>

</body>
</html>

事件的绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vuetest2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app1">
    <h1 v-bind:title="msg">
        鼠标悬停在这查看提示
    </h1>
</div>
<script>
    var vm = new Vue({
        el:"#app1",
        data:{
            msg: "悬停的数据提示"
        }
    });
</script>
</body>
</html>

点击事件的绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vuetest2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app1">
<button v-on:click="clickthis">点击事件</button>
</div>
<script>
    var vm = new Vue({
        el:"#app1",
        data:{},
        methods: {
            clickthis: function () {
                alert("点击事件生效！");
            }
        }
    });
</script>
</body>
</html>

澜色海湾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.0、Vue的基本语法

2.0、Vue的基本语法本节内容主要介绍一下if、for、还有事件的绑定if和else if和else语法的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vuetest2</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/
复制链接

扫一扫