【vue 2】vue基本语法

最新推荐文章于 2024-06-18 21:17:57 发布

诗若颜

最新推荐文章于 2024-06-18 21:17:57 发布

阅读量109

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_44718582/article/details/115363888

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue.js中常用的指令v-if、v-else、v-else-if的条件渲染以及v-for的循环遍历用法，通过实例展示了如何在模板中根据数据动态控制元素的显示和隐藏，以及如何遍历数组生成列表。示例代码清晰地呈现了这些指令的实际应用。

摘要由CSDN通过智能技术生成

Vue基本语法

v-if和v-else的使用

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

<div id="app">
<!--    v-if和else-->
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

</div>


</body>
<script>
    var vm = new Vue({
        // 绑定元素
        el: "#app",
        // 数据
        data:{
            // 为true则显示
            ok: true
          
        }
    });
</script>
</html>

运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GvXXWOpy-1617203943938)(D:\文件夹\MarkDown\photos\image-20210331230719866.png)]$

v-if,v-else-if,v-else的使用

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

<div id="app">

<!--    v-if,v-else-if,v-else-->
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'" >B</h1>
    <h1 v-else-if="type==='D'" >D</h1>
    <h1 v-else>C</h1>
</div>


</body>
<script>
    var vm = new Vue({
        // 绑定元素
        el: "#app",
        // 数据
        data:{
            type: 'A'
        }
    });
</script>
</html>

运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l9rUkXDZ-1617203943942)(D:\文件夹\MarkDown\photos\image-20210331231326594.png)]$

v-for的使用

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

<!--view层 模板-->
<div id="app">
<!--    v-for-->
    <li v-for="item in items">
        {{item.message}}
    </li>

</div>


</body>
<script>
    var vm = new Vue({
        // 绑定元素
        el: "#app",
        // 数据
        data:{
           items: [
               {message: '111111111111'},
               {message: '22222222222'}
           ]
        }
    });
</script>
</html>