<!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的更多相关文章

  1. 对​O​p​e​n​C​V​直​方​图​的​数​据​结​构​C​v​H​i​s​t​o​g​r​a​m​的​理​解

    前几天被OpenCV的直方图的数据结构CvHistogram弄得很纠结.上网一搜,也没什么相关的资料.现在有点头绪了,就写点东西,让后面的人好走一些吧. 先来看看CvHistogram的定义: typ ...

  2. XVI Open Cup named after E.V. Pankratiev. GP of Ukraine

    A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...

  3. XVI Open Cup named after E.V. Pankratiev. GP of Eurasia

    A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...

  4. XVI Open Cup named after E.V. Pankratiev. GP of SPB

    A. Bubbles 枚举两个点,求出垂直平分线与$x$轴的交点,答案=交点数+1. 时间复杂度$O(n^2\log n)$. #include<cstdio> #include<a ...

  5. oracle V$SESSION各个字段的含义

    源地址:https://zhidao.baidu.com/question/345549929.html SADDR - session addressSID - session identifier ...

  6. Java集合源码分析（七）HashMap<K, V>

    一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外,HashMap  ...

  7. 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 ...

  8. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  9. 转：V$SQL,V$SQLAREA,V$SQLTEXT

    V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...

随机推荐

  1. kafka中的offset概念

    在 Kafka 中无论是 producer 往 topic 中写数据, 还是 consumer 从 topic 中读数据, 都避免不了和 offset 打交道, 关于 offset 主要有以下几个概念 ...

  2. 关于golang-mod的使用方法

    简单粗暴仅需要三步即可 $ go mod download $ go mod tidy $ go build -v 这里保持默认什么都不用添加,项目无需在 gopath里面 Vendoring mod ...

  3. 【cf比赛记录】Codeforces Round #601 (Div. 2)

    Codeforces Round #601 (Div. 2) ---- 比赛传送门 周二晚因为身体不适鸽了,补题补题 A // http://codeforces.com/contest/1255/p ...

  4. TypeScript 真香系列——接口篇

    接口带来了什么好处 好处One —— 过去我们写 JavaScript JavaScript 中定义一个函数,用来获取一个用户的姓名和年龄的字符串: const getUserInfo = funct ...

  5. NOIP 2013货车运输

    当然这题有很多做法,但是我看到没有人写DSU的很惊奇 按照之前做连双向边题的经验,这题可以用并查集维护联通 然后对于每个询问\(x,y\),考虑启发式合并 当两个点集\(x,y\)合并时,一些涉及到其 ...

  6. 迁移学习、fine-tune和局部参数恢复

    参考:迁移学习——Fine-tune 一.迁移学习 就是把已训练好的模型参数迁移到新的模型来帮助新模型训练. 模型的训练与预测: 深度学习的模型可以划分为 训练 和 预测 两个阶段. 训练 分为两种策 ...

  7. Apache Kylin - 大数据下的OLAP解决方案

    OLAPCube是一种典型的多维数据分析技术,Cube本身可以认为是不同维度数据组成的dataset,一个OLAP Cube 可以拥有多个维度(Dimension),以及多个事实(Factor Mea ...

  8. nestjs pm2 启动 静态文件404报错

    不要直接使用pm2 start 可执行文件,静态文件会显示404. 使用如下方式:

  9. 查看ssh有没有被黑的IP

    #grep "Failed password " /var/log/auth.log | awk '{print $11}' | sort | uniq -c | sort -nr ...

  10. MySQL 使用 ON UPDATE CURRENT_TIMESTAMP 自动更新 timestamp （转）

    原文地址: https://blog.csdn.net/heatdeath/article/details/79833492 `create_time` timestamp not null defa ...