博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Slog14_支配vue框架模版语法之v-if
阅读量:5862 次
发布时间:2019-06-19

本文共 1400 字,大约阅读时间需要 4 分钟。

  • ArthurSlog
  • SLog-14
  • Year·1
  • Guangzhou·China
  • July 18th 2018

关注微信公众号“ArthurSlog”

有一只火鸡,他想,这主人天天给我喂吃的,对我也挺不错,要按照这个逻辑,我觉得过不了多久,我就能取代他家狗,成为他最心爱的宠物, 结果一个月后感恩节直接就上餐桌了


开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源:

  • 本文的所有
  • vue.js 的,当前(2018/7/17)一共有 13 个,分别是:
  1. v-text
  2. v-html
  3. v-show
  4. v-if
  5. v-else
  6. v-else-if
  7. v-for
  8. v-on
  9. v-bind
  10. v-model
  11. v-pre
  12. v-cload
  13. v-once
  • vue.js 的模版指令,与编程语言的 “关键字” 或者 “保留字” 有点相似,例如 if(判断语句关键字)、for(循环语句关键字)

开始编码

  • 首先,搭起静态服务器,先切换至桌面路径
cd ~/Desktop
  • 创建一个文件夹node_vue_directive_learningload
mkdir node_vue_directive_learningload
  • 切换路径到新建的文件夹下
cd node_vue_directive_learningload
  • 使用npm初始化node环境,一路enter键完成初始化
npm init
  • 使用npm安装koa和koa-static
sudo npm install koa koa-static
  • 参考,我们在当前路径下编写index.js和index.html两份文件

index.js

const serve = require('koa-static');const Koa = require('koa');const app = new Koa();// $ GET /package.jsonapp.use(serve('.'));app.listen(3000);console.log('listening on port 3000');

index.html

    
ArthurSlog

The static web server by ArthurSlog

  • 接下来,我们来根据使用场景,来编写 vue.js 模版指令代码

v-if.html

        
ArthurSlog

Hello ArthurSlog, "state1" === "state2"

Hello ArthurSlog, "state1" !== "state2"

  • 现在你可以打开浏览器,在地址栏输入 127.0.0.1:3000/v-if.html,你会看到:Hello ArthurSlog, "state1" === "state2",因为此时 state1 的值与 state2 的值相等,判断为 true,所以会显示出第一条字符串
  • 至此,我们把 vue模版指令 v-if 介绍了一遍,更多使用方法和信息,请参考 。

欢迎关注我的微信公众号 ArthurSlog

ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢

转载地址:http://bzgjx.baihongyu.com/

你可能感兴趣的文章
oracle只读账号建立
查看>>
mod_layout
查看>>
hive0.11 hiveserver custom认证bug
查看>>
javascript 的垃圾收集例程
查看>>
MySQL表分区
查看>>
我的友情链接
查看>>
13.4 MySQL用户管理;13.5 常用sql语句;13.6 MySQL数据库备份恢复
查看>>
我的友情链接
查看>>
JavaWeb04-HTML篇笔记(五)
查看>>
读《做单--成交的秘密》有感
查看>>
hash 内部实现
查看>>
软件测试流程
查看>>
JS(JavaScript)的进一步了解1(更新中···)
查看>>
LaTeX插入jpg图片: 使用graphicx
查看>>
TP为什么这个if判断什么都不显示?
查看>>
Java NIO Related
查看>>
ACM 算法模板
查看>>
jQuery方法大全
查看>>
PAT Acute Stroke (30)
查看>>
CSS/块级元素与内联元素的深入理解
查看>>