Vue 学习02——常用模版语法菜鸟教程【v-if / v-show / v-bind / v-for】

最新推荐文章于 2022-08-18 10:47:21 发布

winner_corl

最新推荐文章于 2022-08-18 10:47:21 发布

阅读量851

点赞数

分类专栏： vue 文章标签： vue v-show v-if v-model 常见vue指令

本文链接：https://blog.csdn.net/Sicily_winner/article/details/89315523

版权

㋀㏩

✎ 前言

◆ v-for 绑定事件指令

① 数组循环

❶ item in items

▶ 全写demo（不含index）

❷ (item, index) in items

▶ 全写demo（含index）

② 对象循环

③ 组件循环

前言： <componentA v-for="(value,key) in objList" :key="key"></componentA>

▶ 1.创建a.vue

▶ 2.在App.vue中编写组件a.vue循环

▶ 3.效果图

④ v-for 遇到的问题

✎ 总结

◆ 直接书写标签属性和使用v-bind定义的区别（x.vue）

◆ 小试牛刀v-if / show / bind整合1

① 效果图

◆ 小试牛刀v-if / else 整合2

✎ 总结

前言

之前我们已经了解到了vue的框架是MVVM，MODEL就是数据结构，el标识绑定的元素，只有在绑定元素的内部，我们才可以使用vue的实例和vue的处理过程，data是可以直接在视图模板中使用的。

vue学习关注的东西

view实例【渲染数据的HTML】
view-model（就是script里面的内容）

我们要做的事情就是理解vue的指令！！

常见的vue指令

v-if / v-else / v-show 绑定元素指令

判断ifshow是否为真，真则div元素显示，两个指令的效果是一样的。

v-show区别在于元素师存在的但是是设置了display:none，而v-if是元素直接移除！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-001</title>
</head>
<body>
<div id="app">
    <div v-if="ifshow">
        {
  {message}}
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script type="text/javascript">
    var myvue = new Vue({
        el: "#app",
        data: {
            ifshow: true,
            message: "hello world"
        }
    })
</script>

</body>
</html>

最低0.47元/天解锁文章

winner_corl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习02——常用模版语法菜鸟教程【v-if / v-show / v-bind / v-for】

㋀㏩✎ 前言◆v-for 绑定事件指令 ①数组循环 ❶item in items ▶全写demo（不含index） ❷(item, index) in items ▶全写demo（含index）② 对象循环③ 组件循环前言：<componentA v-for="(value...
复制链接

扫一扫