Vue基本语法

最新推荐文章于 2024-02-04 14:52:21 发布

你的热情还在吗

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/weixin_40928238/article/details/108738839

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

逻辑语句

v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--四步：1.导入vue 2.new Vue对象 3.绑定一个元素 4.放数据 5.从模板中显示-->
<body>

<!--view层模板-->
<div id="app">
    <h1 v-if="type==='A'">你好</h1>
    <h1 v-else-if="type==='B'">你好不好</h1>
    <h1 v-else>不好也得好</h1>
</div>

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

</body>
</html>

循环语句

v-for

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--四步：1.导入vue 2.new Vue对象 3.绑定一个元素 4.放数据 5.从模板中显示-->
<body>

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

<!--1.导入vue.js-->
<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: 'A'},
               {message: 'B'},
               {message: 'C'}
           ]
        }
    });
</script>

</body>
</html>

你的热情还在吗

关注

0
点赞
踩
0

收藏

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

逻辑语句v-if v-else-if v-else<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--v..
复制链接

扫一扫

专栏目录