<!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. [golang][gui]Hands On GUI Application Development in Go【在Go中动手进行GUI应用程序开发】读书笔记03-拒交“智商税”，解密“GUI”运行之道

    和老外的原文好像没多大联系了,哈哈哈,反正是读书笔记,下面的内容也是我读此书中的历程,也写进来吧.不过说实话,这框架的作者还挺对我脾气的,哈哈哈. 拒交“智商税”,解密“GUI”运行之道 我很忙 项目 ...

  2. 性能测试-GC问题整理

    年轻代与老年代的调优(笔记整理) 几个常见名词 年轻代(young 区)从年轻代空间(包括Eden和Survivor 区域)回收内存被称为 Minor GC空间太小可能导致对象直接进入 old区 .如 ...

  3. jvm（三）指令重排 & 内存屏障 & 可见性 & volatile & happen before

    参考文档: https://tech.meituan.com/java-memory-reordering.html http://0xffffff.org/2017/02/21/40-atomic- ...

  4. 服务器负载过高问题分析-不是cpu高负载也不是IO负载如何处理(阿里 几乎是必考题)

    关于top命令 经常问load average 参考:load average 定义(网易面试) jvm dump的使用 参考:Jvm dump jstack jmap jstat 介绍与使用(内存与 ...

  5. vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...

  6. 在 Alpine Linux 中安装 bash shell

    如何在我的 Alpine Linux LXD(Linux容器)虚拟机(VM)中安装 bash shell? Alpine Linux 自带 BusyBox 工具.它被评为“嵌入式 Linux 的瑞士军 ...

  7. Promise和Observable的映射

    前言 promise解决了嵌套地狱的问题,Observable解决了promise只有一个结果,和不可以取消的问题. 使用的是rxjs6版本. 这篇文章是方便使用Observable的API替换Pro ...

  8. MQTT研究之EMQ：【EMQX使用中的一些问题记录（3）】

    EMQX功能强大,但是帮助信息或者可用资料的确有限,遇到个问题,比较难找到处理的头绪,今天,我要记录的是,使用中出现EMQX宕机,但是呢,启动也启动不了. 今天记录的内容,就以操作EMQX 3.2.3 ...

  9. Operation之其他实用操作符

    delay 该操作符会将 Observable 的所有元素都先拖延一段设定好的时间, 然后才将他们发送出来 Observable.of(1,2,3,4) .delay(5, scheduler: Ma ...

  10. TELNET可以连通但无法创建数据库连接（Oracle）

    问题描述: 近期客户方进行了网络调整,申请A服务器的1521端口开通后,telnet可以访问,但是SQLPLUS.PLSQL等工具一直无法创建相应连接,提示连接超时. 问题排查: 对开放端口的所有服务 ...