if和for语句学习v-bind学习v-if学习v-for学习

92 阅读 0 评论 61 点赞

我是靠谱客的博主认真山水，最近开发中收集的这篇文章主要介绍if和for语句学习v-bind学习v-if学习v-for学习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

v-bind学习

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind学习</title>
</head>
<body>

    <div id="app">
        <span v-bind:title="message">
            <font size=5 color="#ff4500"><strong>鼠标悬浮上去几秒钟有惊喜</strong></font>
        </span>
    </div>

    <!--引入vue的cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello，springVue！！！"
            }
        });
    </script>

</body>
</html>

结果如下

在这里插入图片描述

v-if学习

这里的if else 和if elseif else其实和java语言的判断一样只不过是这里多加了一个v-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断语句学习v-if</title>
</head>
<body>

    <div id="app">
        <h1 v-if="message==='A'"><font color="#8b008b"> I love A</font></h1>
        <h1 v-else-if="message==='B'"><font color="#8b008b"> I love B</font></h1>
        <h1 v-else><font color="#cd5c5c"> I love C~Z</font></h1>
    </div>

    <!--引入vue的cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "A"
            }
        });
    </script>

</body>
</html>

结果如下

在这里插入图片描述

v-for学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环语句学习</title>
</head>
<body>

    <div id="app">
        <ul>
            <li v-for = "item in items">
                {{item.message}}
            </li>
        </ul>

        <Ol>
            <li v-for = "(item,index) in items">
                {{item.message}}     {{index}}
            </li>
        </Ol>

    </div>

    <!--引入vue的cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                items: [
                    {message: "Java入门到精通"},
                    {message: "linux操作系统"},
                    {message: "啊哈！算法"},
                    {message: "数据结构"}
                ]
            }
            });
    </script>

</body>
</html>

结果如下

在这里插入图片描述