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 ...
随机推荐
- PAT刷题 （Java语言）
1001. A+B Format (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Calculate ...
- fiddler实现B/S端、APP抓包分析遇到的各种疑问
阅读本文前您需要先下载fiddler并成功安装,并且要有一丢丢测试和接口基础或者在学习fidder时遇到了问题,或许本文可以帮助到你 一.B/S端抓包 Fiddler设置 1. 官网下载fiddler ...
- GlusterFS 安装
一.简介 GlusterFS 是近年兴起的一个高性能开源分布式文件系统,其目标是全局命名空间.分布式前端的高性能文件系统,目前已被 RedHat 看中,GlusterFS 具有高扩展.高可性.高性能. ...
- springboot框架在容器加载完成之后执行某个方法
问题描述: 想在websocket实现的Handler中执行一些初始化操作,但是初始化操作使用到了@Autowired自动注入的变量,而且是保护类型.第一个想法是放到Handler构造函数中执行,但是 ...
- NioEventLoopGroup源码分析与线程设定
我的以Netty Socket编程的代码为例, 1.EventLoopGroup 进入EventLoopGroup,这是一个特殊的EventExecutorGroup,在事件循环中,在selectio ...
- Android ImageView属性
ImageView 继承自View组件,主要功能是用于显示图片,实际上它不仅仅可以用来显示图片,任何Drawable对象都可以使用ImageView来显示.ImageView可以适用于任何布局中,并且 ...
- log配置文件log4j.propeties（配置保存日志文件的相对路径）
log配置文件log4j.propeties(配置保存日志文件的相对路径) log4j.propeties文件: #日志的4种级别ERROR(错误).WARN(警告潜在的错误).INFO(粗粒度信息) ...
- zabbix使用自动发现功能批量监控服务器端口的可用性
使用自动发现脚本批量监控服务器端口的可用性 .编写自动发现脚本 # cat /usr/local/zabbix_agents_3.2.0/scripts/web_site_code_status.sh ...
- C#实体类null自动转空字符串
C#实体类null自动转空字符串 using System.ComponentModel.DataAnnotations; [DisplayFormat(ConvertEmptyStringToNul ...
- python bottle + jieba分词服务
2019-12-16 19:46:34 星期一 最近接触到结巴分词项目, 就试试 用python的bottle库来当服务器监听localhost:8080 把请求的数据转给jieba来分词, 并返回分 ...