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

前言

常见的vue指令

前言

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

vue学习关注的东西

view实例【渲染数据的HTML】
view-model

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

常见的vue指令

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

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

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

全写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>

总结

v-if 确定元素是否在视图中存在
v-show 确定元素是否在视图中显示
v-bind 给标记添加动态属性