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 ...
随机推荐
- Linux:搭建GitLab
0.写在前面 GitLab官方明确要求最低配置2核4G,如果配置过低,会出现502错误. 1.安装SSH #安装ssh sudo yum install -y curl policycoreutils ...
- SpringBoot上传文件到本服务器 目录与jar包同级问题
目录 前言 原因 实现 不要忘记 最后的封装 Follow up 前言 看标题好像很简单的样子,但是针对使用jar包发布SpringBoot项目就不一样了.当你使用tomcat发布项目的时候,上传 ...
- ruby-on-rails-BUG
Ruby on Rails errors: (新手期) rails 自动化部署教程 Q1: rvm 无法使用 $ rvm use 1.9.3 --default RVM is not a functi ...
- java SDK服务端推送 --极光推送（JPush）
网址:https://blog.csdn.net/duyusean/article/details/86581475 消息推送在APP应用中越来越普遍,来记录一下项目中用到的一种推送方式,对于Andr ...
- JPA的查询方法总结
一.使用where条件上一篇我们使用JPA进行了数据源的访问,默认JPA已经实现了好几个接口可以调用.但是,在实际的业务中,查询语句不可避免地需要使用where.order by等语句. 我们用商品数 ...
- Web打印的解决方案之证件套打
由于以前未接触过套打,一直觉得套打是一个比较神秘和麻烦的事情,因为打印机的位置总是需要调整的,你总不能硬编码吧?但是如果位置可调,有需要直观一些来处理,那就比较麻烦了. 在前面介绍过<Web打印 ...
- git 常用命令的总结
1. git 查看分支 git branch (星号代表当前的分支) 2. 创建一个本地分支 git checkout -b 分支名称 3. 将本地新建分支提交到远程 git push origin ...
- 每日题解: 两数之和 & 有效的括号
- 两个字符串对比提升比较性能用 StringComparison.OrdinalIgnoreCase
如果用string.ToLower() 或者 string.ToUpper()字符串在进行大小写转换时会消耗额外的性能 用这个比较性能更好 StringPwd1.Equals(Md5(PassWord ...
- SpringCloud 微服务中 @Async 注解自定义线程池 引发的aop 问题
背景 在 使用springCloud 的@Async注解来做异步操作时,想自定义其线程池. 引发问题 自定义完线程池后,发现代码里并没有使用自定义线程池里的线程,于是新建一个demo工程,一样的配置代 ...