Vue基本语法

最新推荐文章于 2024-10-04 00:46:18 发布

桉森屿夏

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量318

点赞数 2

本文链接：https://blog.csdn.net/m0_59090147/article/details/129842142

版权

VUE 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vue基本语法

1、v-bind

可以使用 v-bind 来绑定元素特性！

<!--view层 变成了一个模板-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model ：数据
        data:{
            message:"hello vue!"
        }
    })
</script>

</body>

你看到的 v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的message 属性保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = ‘新特性’ ，就会再一次看到这个绑定了title特性的 HTML 已经进行了更新。

2、v-if,v-else

<body>
<div id="app">
    <h1 v-if="ok">
        true
    </h1>
    <h1 v-else>
        false
    </h1>
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model ：数据
        data: {
            ok: true
        }
    })
</script>

</body>

注：使用v-*属性绑定数据是不需要双花括号 {{}} 包裹的

3、v-else-if

<body>
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else="type==='A'">C</h1>
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model ：数据
        data: {
            type: "A"
        }
    })
</script>
</body>

4、v-for

<body>
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
       data: {
            items: [
                {message:'狂神说java'},
                {message:'狂神说Vue'},
                {message:'狂神说运维'}

            ]
       }
    })
</script>
</body>