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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

前言

常见的vue指令

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

v-bind 绑定事件指令

简写demo

全写demo

总结

  • 前言

之前我们已经了解到了vue的框架是MVVM，MODEL就是数据结构；

  • vue学习关注的东西

  1. view实例【渲染数据的HTML】

  2. view-model

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

  • 常见的vue指令

  • v-if / 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/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
    var myvue = new Vue({
        el: "#app",
        data: {
            ifshow: true,
            message: "hello world"
        }
    })
</script>
</body>
</html>

  • v-bind 绑定事件指令

  • 简写demo

  • 全写demo

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
....
<div id="app">
    <a v-bind:href="links">百度</a>
</div>
....
</body>
</html>

  • 总结

  1. v-if 确定元素是否在视图中存在

  2. v-show 确定元素是否在视图中显示

  3. v-bind 给标记添加动态属性

以上是 Vue 学习02——常用模版语法 菜鸟教程【v-if / v-show / v-bind】 的全部内容， 来源链接： utcz.com/z/377226.html

回到顶部