<!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. 原生js如何判断元素出现在可视区

    元素出现在可视区 scorll滑动的距离>=当前元素距离浏览器最顶端的高度+当前元素自身的高度-当前可视区的高度 触底 scorll滑动的距离>=当前scroll总高度-当前可视区的高度

  2. Android根据加速度和地磁场传感器实现自动对焦

    在相机预览开始后新建AutoFocusManage对象即可,传入context和camera. 注意,在停止预览或者关闭相机时需调用方法中unregisterListener方法. 目前实现是当前方向 ...

  3. paython基础-格式化输出

    目录 %s %r %d 及其他%... formate f"{变量}" 详细查找:https://docs.python.org/3/library/string.html#for ...

  4. nginx location配置说明

    nginx location语法规则:location  [=|~|~*|^~]  /uri/  { … } nginx的location匹配的变量是$uri 规则优先级 = 高于 ^~ 高于 ~* ...

  5. #Ubuntu 14.04 系统下载

    http://mirrors.aliyun.com/ubuntu-releases/14.04/

  6. 剑指offer：把数组排成最小的数

    题目描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路分析: ...

  7. Java: 线程池(ThreadPoolExecutor)中的参数说明

    最近在看<阿里巴巴Android开发手册>,里面有这样几句话: [强制]新建线程时,必须通过线程池提供(AsyncTask 或者ThreadPoolExecutor或者其他形式自定义的线程 ...

  8. C#　Area区域配置，修改默认路由

    1.右键项目新建文件夹 Areas 2.先把项目分类包好,建两个文件夹,放Controller和View,Model也可以放在这里 因为项目启动默认打开的是Home/Index ,我把它放在了Webs ...

  9. shebang是啥

    在计算领域中,Shebang(也称为 Hashbang )是一个由井号和叹号构成的字符序列 #! ,其出现在文本文件的第一行的前两个字符. 在文件中存在 Shebang 的情况下,类 Unix 操作系 ...

  10. LR 算法总结--斯坦福大学机器学习公开课学习笔记

    在有监督学习里面有几个逻辑上的重要组成部件[3],初略地分可以分为:模型,参数 和 目标函数.(此部分转自 XGBoost 与 Boosted Tree) 一.模型和参数   模型指给定输入xi如何去 ...