<!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. 洛谷 P2040 打开所有的灯 题解

    这个题写其他题解的dalao们已经解释了 一个灯最多开一次(如果实在不知道为什么看评论区) 这个题一共就9个灯嘛,对吧 递归好想不好写(对于我这种蒟蒻) 所以我写了一个所有题解中最暴力的 直接枚举9个 ...

  2. fork和vfork

    转载 http://coolshell.cn/articles/12103.html 在知乎上,有个人问了这样的一个问题——为什么vfork的子进程里用return,整个程序会挂掉,而且exit()不 ...

  3. 你知道多少this，new，bind，call，apply？那我告诉你

    那么什么是this,new,bind,call,apply呢?这些你都用过吗?掌握这些内容都是基础中的基础了.如果你不了解,那还不赶快去复习复习,上网查阅资料啥的! 通过call,apply,bind ...

  4. Fluent　Meshing分离边界层网格

    源视频链接: https://pan.baidu.com/s/1SYB7UdRuXOGYXYwmxKADdw  提取码: h7qj

  5. leetcode 337. 打家劫舍iii

    题目描述: 在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可行窃的地区.这个地区只有一个入口,我们称之为“根”. 除了“根”之外,每栋房子有且只有一个“父“房子与之相连.一番侦察之后,聪明 ...

  6. 命令行利用ffmpeg实现rtmp推流《转》

    ffmpeg在以前介绍过,是一个相当强大的工具,我们这次利用它实现rtmp推流(最终推流地址统一为rtmp://127.0.0.1:1935/live/123). 1.首先下载ffmpeg和ffpla ...

  7. Deepin系统中手动开启swap的方法

    Deepin系统中手动开启swap的方法 如何设置 swap(交换空间)的大小建议设置和你的实际物理内存一样大,如你的内存是8G的,则可将下面的count的值设为8192(当然这只是参考值,你可根据你 ...

  8. docker stack删除network失败

    现象描述 删除stack的时候没太多提示,但再启动相同的stack会报错,提示网络创建失败:随后使用network ls命令可以看到之前的network还在: 使用docker network rm还 ...

  9. Scrapy的 Shell终端

    crapy Shell Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据. ...

  10. mysqldump导出完整sql脚本

    #导出某个数据库--结构+数据 shell>mysqldump -h192.168.161.124 -uroot -pxxxxxx --opt db_name |gzip -9 > /db ...