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 ...
随机推荐
- Macbook Pro升级10.15后百度网盘无法登陆，网络连接错误(-1001)
兴冲冲升级到10.15,结果百度网盘挂了~QQ 由于长期在境外实验室做研究,百度又封锁了境外登陆,所以客户端是唯一跟家里联络的方式,现在它也挂了感觉整个天都塌下来了. 找了一圈,发现一个特别神奇的解锁 ...
- FPGA综合的约束
近日发现,有些逻辑电路的综合时间约束和布局布线约束相差太大时,难以布通.此时,应该选择尽量接近的时钟约束.
- JavaScript map reduce
23333333333333 map var s = []; for(let i=0;i<10;i++){ s.push(i); } function pow(x){ return x*x; } ...
- xshell && xftp 下载
链接:https://pan.baidu.com/s/1aLdgOSshytIYhArkB7tghQ 提取码:fqjb
- shell expect的简单实用
一.在shell脚本中嵌入expect来实现密码输入 expect是一个自动交互功能的工具.expect是开了一个子进程,通过spawn来执行shell脚本,监测到脚本的返回结果,通过expect判断 ...
- 【BIEE】使用BIPublisher做报表时，选择多个参数使用IN的问题
在使用BIPublisher做报表的时候,报表出现xml数据加载错误的情况 环境描述 仪表盘提示是表示变量,并且支持多选 报表使用xdo方式制作的,直接使用JDBC直连数据库获取数据 数据集中的SQL ...
- Fluent瞬态结果导出为Ensight格式
参考: (1)<ANSYS Fluent User's Guide>的3.13.9. EnSight Case Gold Files (2)https://support.ceisoftw ...
- linux 上使用yum 安装openjdk1.8
使用yum查找jdk: yum search java|grep jdk # yum search java|grep jdk ldapjdk-javadoc.noarch : Javadoc for ...
- linux pip
$ wget https://bootstrap.pypa.io/get-pip.py$ python get-pip.py$ pip -V #查看pip版本 接下来就可以随便pip安装东西了 首先查 ...
- 【Laravel基础】laravel基础之相关概念，自定义服务提供者：Contracts, ServiceContainer, ServiceProvider, Facades关系
Contracts, ServiceContainer, ServiceProvider, Facades关系 概念 Contracts 合同,契约,也就是接口,定义一些规则,每个实现此接口的都要实现 ...