Vue中的指令 & 判断、循环

最新推荐文章于 2024-03-18 02:05:36 发布

秀聚

最新推荐文章于 2024-03-18 02:05:36 发布

阅读量569

点赞数

分类专栏： # Vue 学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43852058/article/details/107808541

版权

学习笔记同时被 2 个专栏收录

69 篇文章 1 订阅

订阅专栏

Vue

19 篇文章 2 订阅

订阅专栏

2、Vue基本语法

2.1 常用指令，v-

在 Vue 中，v-开头的被称为指令，表示他们是Vue提供的特殊特性。他们会在渲染的 DOM 上应用特殊的响应式行为。

2.1.1 v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-bind:title="message">
        当鼠标悬浮上去的时候，会有提示信息
    </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "页面创建与" + new Date().toLocaleString()
        }
    })
</script>
</body>
</html>

在这里， v-bind指令的意思是： “将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定，使他们的信息保持一致。

如果你再次打开浏览器的控制台，输入vm.message = “新消息”，就会再一次看到这个绑定了 title 特性的 HTML 进行了更新。
在这里插入图片描述

2.1.2 v-if, v-else

没什么好说的，直接上代码吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- view层 模板 -->
<div id="app">
    <!-- 注意书写格式 -->
    <h1 v-if="scale > 90">优秀</h1>
    <h1 v-else-if="scale > 80">良好</h1>
    <h1 v-else-if="scale > 70">还行</h1>
    <h1 v-else-if="scale > 60">合格</h1>
    <h1 v-else>不合格</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 新建 Vue 对象
    let vm = new Vue({
        el: "#app",
        data: {
            scale: 100
        }
    })
</script>
</body>
</html>

2.1.3 v-for

注意书写格式就好，跟 java 里的 forEach 循环有点像，只是将 “：” 改成了 in

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模板 -->
<div id="app">
    <li v-for="item in items">
        {{item.name}}
    </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 新建 Vue 对象
    let vm = new Vue({
        // 绑定元素
        el: "#app",
        data: {
            items: [
                {name: "张三"},
                {name: "李四"},
                {name: "王五"}
            ]
        }
    })
</script>
</body>
</html>

如果想再循环的时候获取元素索引，可以这样写

<li v-for="(item, index) in items">
    {{item.name}} --- {{index}}
</li>

2.1.4 v-on 事件绑定

不知道有什么事件可以查，查jQuery的事件

函数需要定义到 Vue 的 methods 中，通过 v-on 绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层 模板 -->
<div id="app">
    <!-- 不知道有什么事件可以查，可以查jq的事件 -->
    <button v-on:click="sayHi">点击我</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 新建 Vue 对象
    let vm = new Vue({
        el: "#app",
        data: {
            message: "hello Vue"
        },
        methods: { // 将函数定义到 Vue 的 methods 中，通过 v-on 绑定
            sayHi: function () {
                alert(this.message)
            }
        }
    })
</script>
</body>
</html>

秀聚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的指令 & 判断、循环

2、Vue基本语法2.1 常用指令，v-在 Vue 中，v-开头的被称为指令，表示他们是Vue提供的特殊特性。他们会在渲染的 DOM 上应用特殊的响应式行为。2.1.1 v-bind<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title&lt
复制链接

扫一扫