vue的特殊指令 v-if v-once v-bind v-for v-on v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>特殊指令</title>
<script src="vue.js"></script>
</head>
<body> <div id="app">
<!-- v-once 只能渲染一次。const --> <!-- v-bind----vue提供的特殊指令：表示将这个元素的节点title特性和vue实例的aaa属性保持一致 -->
<span v-bind:title="aaa">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span> <!-- v-if控制切换一个元素是否显示 -->
<p v-if='seen'>现在你看到我了</p> <!-- 特殊指令v-for='todo in 循环数组的名称' 绑定数组的数据来渲染一个列表 -->
<ol>
<li v-for='todo in todos'>
{{todo.text}}
</li>
</ol> <!-- v-on添加事件监听器 -->
<p>{{content}}</p>
<button v-on:click="reverseContent">反转内容</button><!-- 当点击按钮时触发reverseContent函数 --> <!-- v-model 实现表单输入和应用状态之间的双向绑定 -->
<p>{{main}}</p>
<input type="text" v-model="main">
</div> <script>
// vue基础操作语法，特殊指令介绍
var app = new Vue({
el: '#app',
data: {
// v-bind
aaa: '页面加载于'+new Date().toString(),
// 控制台输出app.message="" app.name="" app.aaa="" ,页面会响应式变化 // v-if
seen: true,
//控制台输出app.seen=false p元素在页面中就看不到了 记住此处不能加引号 // v-for
todos: [
{text: '学习js'},
{text: '学习vue'},
{text: '好事'}
],
//在控制台输入app.todos.push({text:'新li'})，就可以在页面列表中添加一条新项 // v-on绑定事件
content: '我爱学习', // v-model表单和p标签内容双向绑定
main: '请输入内容'
},
methods:{
reverseContent:function() {
this.content = this.content.split('').reverse().join('')
}
}
}); </script>
</body>
</html>
vue的特殊指令 v-if v-once v-bind v-for v-on v-model的更多相关文章
- 对OpenCV直方图的数据结构CvHistogram的理解
前几天被OpenCV的直方图的数据结构CvHistogram弄得很纠结.上网一搜,也没什么相关的资料.现在有点头绪了,就写点东西,让后面的人好走一些吧. 先来看看CvHistogram的定义: typ ...
- XVI Open Cup named after E.V. Pankratiev. GP of Ukraine
A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...
- XVI Open Cup named after E.V. Pankratiev. GP of Eurasia
A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...
- XVI Open Cup named after E.V. Pankratiev. GP of SPB
A. Bubbles 枚举两个点,求出垂直平分线与$x$轴的交点,答案=交点数+1. 时间复杂度$O(n^2\log n)$. #include<cstdio> #include<a ...
- oracle V$SESSION各个字段的含义
源地址:https://zhidao.baidu.com/question/345549929.html SADDR - session addressSID - session identifier ...
- Java集合源码分析（七）HashMap<K, V>
一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外,HashMap ...
- Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Description I ...
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- 转：V$SQL,V$SQLAREA,V$SQLTEXT
V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...
随机推荐
- 洛谷2320 bzoj1192 鬼谷子的钱袋
题目链接 题意概述:把正整数n分为m个正整数,m个正整数中不允许出现复数个非1的正整数,保证所有小于n的正整数都可以用一部分正整数的和表示,并且使m尽量小. 这道题不知道为啥bzoj上没有要求输出方案 ...
- SpringCloud：Feign模块引用版本问题
1.问题报错 org.springframework.beans.factory.BeanDefinitionStoreException: Failed to process import cand ...
- (ACP)敏捷项目管理
第1章 为什么需要敏捷 第2章 敏捷和敏捷项目管理定义 第3章 敏捷项目管理价值和原则 1.我们的最高目标是,通过尽早持续交付有价值的软件来满足客户的需求 2.欢迎对需求提出变更,即使在项目开发后期也 ...
- Oracle之clob字段不能union的问题
原因:由于clob类型字段不能使用group by函数,而union中需要使用group by过滤掉重复纪录: 解决方法:union可以改为union all.
- 华为云ARM64服务器试用
公司同事弄了个华为云的ARM64服务器,让我帮忙部署我们的服务,所以先试用了一下. 总体感觉还行,使用的CentOS系统,yum也能用,epel源也可以用.但是SCL软件集用不了. uname -a ...
- 【Python】解析Python中的装饰器
python中的函数也是对象,函数可以被当作变量传递. 装饰器在python中功能非常强大,装饰器允许对原有函数行为进行扩展,而不用硬编码的方式,它提供了一种面向切面的访问方式. 装饰器 一个普通的装 ...
- django注释
转自https://www.cnblogs.com/dayouzi/p/10154815.html Django在HTML里面书写的模板语言不能使用这种方法注释,这样注释实际依然有效 <!--{ ...
- 嵌入式开发之内核内存异常排查---关闭oom killer
通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解.uptimedmesg | tailvmstat 1mpstat -P ALL 1pidstat 1iostat -xz 1free ...
- 基于realsense的深度数据分析工具
- Failed to open .vcf.gz: could not load index
这类报错在我使用bcftools index file.vcf.gz进行index出现的. 解决办法是换用tabix进行index,命令为tabix -p vcf file.vcf.gz. 用tabi ...