Vue-跟着李南江学编程

子.星语

于 2020-09-29 15:15:53 发布

阅读量866

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ljh1972/article/details/108868989

版权

本文将带你逐步走进Vue的世界，从基础概念到实战技巧，通过李南江的教学，深入理解Vue框架的核心特性，包括组件化、指令系统、响应式数据绑定等，助你快速上手前端开发。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-常用指令v-if</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-if指令
条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素

2.v-if特点:
如果条件不满足根本就不会创建这个元素(重点)

3.v-if注意点
v-if可以从模型中获取数据
v-if也可以直接赋值一个表达式
-->
<!--
4.v-else指令
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容

5.v-else注意点
v-else不能单独出现
v-if和v-else中间不能出现其它内容
-->
<!--
6.v-else-if指令
v-else-if可以和v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个

7.v-else-if注意点
和v-else一样
-->

<!--这里就是MVVM中的View-->
<div id="app">
<!--    <p v-if="show">我是true</p>-->
<!--    <p v-if="hidden">我是false</p>-->
<!--    <p v-if="true">我是true</p>-->
<!--    <p v-if="false">我是false</p>-->
<!--    <p v-if="age >= 18">我是true</p>-->
<!--    <p v-if="age < 18"

最低0.47元/天解锁文章

子.星语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-跟着李南江学编程

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08-常用指令v-if</title> <script src="js/vue.js"></script></head><body><!--1.什么是v-if指令条件渲染: 如果v-if取值是true就渲染元素,
复制链接

扫一扫