vue3 学习-初识体验-常见指令v-on和v-if
继续来体验一波数据驱动结合绑定方法的实践案例. 这里以最常见的反转字符串为栗子来体验面向数据编程.
v-on
用来绑定事件的, 然后将方法名写在 methods 中即可.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
content: "hello, world!"
}
},
// 处理数据的方案都放 methods 中
methods: {
btnClick () {
// 反转字符串
this.content = this.content.split('').reverse().join('')
}
},
template: `
<div>
{{content}}
<button @click="btnClick">反转</button>
</div>
`
}).mount('#root')
</script>
</body>
</html>
v-if
条件成立则Dom生效, 不会保留位置哦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return { show: true }
},
methods: {
btnClick () {
this.show = !this.show
}
},
template: `
<div>
<span v-if="show">hello, world</span>
<button @click="btnClick">显示/隐藏</button>
</div>
`
}).mount('#root')
</script>
</body>
</html>
简单的指令和方法体验就到这里啦, 确实还是很好理解的.
vue3 学习-初识体验-常见指令v-on和v-if的更多相关文章
- Java学习-035-JavaWeb_004 -- JSP include 指令
inclue 指令是将不同的文件插入到 JSP 网页中,这些文件可以是文本文件.HTML文件.JSP 文件,指令语法如下: <%@include file="相对路径"%&g ...
- Java学习-034-JavaWeb_003 -- JSP page 指令
前文对 JSP 的基础知识进行了初步的讲解,此文主要讲述 JSP page 指令. page 指令用于定义页面的多种属性,例如:脚本语言.编码方式.导入的 Java 包等,page 执行的语法如下: ...
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- JVM学习笔记——字节码指令
JVM学习笔记——字节码指令 字节码 0与 1是计算机仅能识别的信号,经过0和1的不同组合产生了数字之上的操作.另外,通过不同的组合亦产生了各种字符.同样,可以通过不同的组合产生不同的机器指令.在不同 ...
- 在Windows环境中开始Docker的学习和体验
研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...
- JSP常见指令
JSP常见指令 标签: jspincludeservletjavaappletarchive 2011-11-07 20:07 13193人阅读 评论(3) 收藏 举报 版权声明:本文为博主原创文章, ...
- AngularJS1.X学习笔记8-自定义指令（上）
AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
随机推荐
- 职场软素质&算法工程师的硬素质--卓越的职场人需要的42种能力
经过自己在实际的工作中摸爬滚打,个人觉得一些方面的能力是非常重要的,可以让自己在职场中快速的脱颖而出,因此,从硬实力,软实力两个方面进行总结如下: 软实力: (1)解决问题的能力 (2)预估风险的能力 ...
- flutter - [03] 运算符&条件表达式
题记部分 一.算术运算符 var a=13; var b=5; 运算符 说明 示例 结果输出 + 加 print(a+b); 18 - 减 print(a-b); 8 * 乘 print(a*b); ...
- mybatis-generator 自动生成mybatis代码与xml
一.pxm.xml中引入mybatis-generator并配置 在build节点下的plugins下添加org.mybatis.generator 示例代码如下: <?xml version= ...
- Python基础-Python操作word、面向对象
今日概要: 第三方模块 -- word 面向对象 1 Word格式-第三方模块 自定义模块 内置模块 第三方模块 requests bs4 openpyxl python-docx 1.1 快速上手 ...
- python基础-函数(lambda表达式、函数作参数、内置函数、推导式)和pip
函数进阶 今日概要: 函数名就是一个变量(扩展) 匿名函数(lambda表达式) 重点内置函数--python内置函数 推导式(一行代码生成数据) 1. 函数名就是变量 def func(): pas ...
- AI 实践｜零成本生成SEO友好的TDK落地方案
之前写过一篇文章「Google搜索成最大入口,简单谈下个人博客的SEO」,文章里介绍了网页的描述信息TDK(Title.Description和Keywords)对SEO的重要作用,尽管已经意识到了T ...
- go的异常抛出
defer func() { if r := recover(); r != nil { fmt.Println("Recovered:", r) } }() 在任何涉及到数组取值 ...
- Web前端入门第 15 问：学会查阅 HTML 文档
HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. HTML的魔法世界,多姿多彩,千变万化. 授人以鱼不如授人以渔,文档阅读是开发者必备的技能,毕竟代码出现 BUG ...
- event.stopPropagation
先记录一下坑: var btn = test.getElementsByTagName('label'); btn[0].active = 'active'; ...
- nginx 部署vue http、https
nignx配置文件 server { listen 80; server_name your_domain.com; return 301 https://$server_name$request_u ...