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 ...
随机推荐
- A1136 | 字符串处理、大整数运算
题目链接: https://www.patest.cn/contests/pat-a-practise/1136 今天是12月17号.最近这几天都有点不在状态.已经整整一周没有练算法了,自从12.3考 ...
- gym102222 G. Factories
gym102222 G. Factories 地址 题目大意: 给一棵n个点的树,选m个点,这m个点只能在叶子节点上,问着m个点中两两之间到达其余各点的距离和最小值是多少题解:任意两点的树上距离和问题 ...
- 可持久化0-1Trie树
我跟可持久化数据结构杠上了 \(QwQ\) .三天模拟赛考了两次可持久化数据结构(主席树.可持久化0-1Trie树),woc. 目录: 个人理解 时空复杂度分析 例题及简析 一.个人理解 可持久化0- ...
- IIS基本设置、回收机制、性能、并发、安全性
通常把站点发布到IIS上运行正常后,很少会去考虑IIS提供的各种参数,如何配置才是最适合当前站点运行需要的?这篇文章,从基本设置.回收机制.性能.并发.安全性等IIS设置讲解应当如何优化. 先来“II ...
- 如何将 普通代码变成 java lamband表达式
public static void main(String[] args) { Map<String, String> map = new HashMap<>(); List ...
- [技术博客] 【vagrant】硬盘扩容
同样,这也是少昂早年走过的坑,这里直接贴出少昂个人博客链接:https://www.cnblogs.com/HansBug/p/9447020.html PS:有一位经验丰富的后端大佬坐镇指挥是多么幸 ...
- k8s相关
卸载kubernetes-dashboard kubectl get secret,sa,role,rolebinding,services,deployments --namespace=kube- ...
- 假如 Redis Cluster 模式用在 T-io 上
前言 前几天在学习Redis Cluster 模式的时候,突然想到如果把它的集群模式应用在T-io上也是挺有意思的一件事情. Redis 集群简介 Redis Cluster 中有 N 台实 ...
- tinylib
tinylib.h /* -------------------------------------------------------------------------------- oooo ` ...
- Linux下如何测试网速
本文链接:https://blog.csdn.net/Beyond_F4/article/details/80497118在Linux下如何测量下载和上传的速度? 这里用到一个Python工具spee ...