vue快捷键与基础指令详解


Posted in Javascript onJune 01, 2017

v-bind可以简写成   :

<img src="{{url}}">→<img :src="url" :width="50px">
v-on:click可以写成@click
<button @click="up()"></button>

v-if实例  可以通过对对象操作条件来实现想要展示的效果

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <p v-if="seen">现在你看到我了</p> 
      <template v-if="ok"> 
        <h1>天气炎热</h1> 
      </template> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          seen:false, 
          ok: true 
        } 
      }) 
    </script> 
  </body> 
</html>

v-for实例:v-for是可以做循环数组使用的

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <ol> 
        <li v-for="x in lists">{{x.title}}</li> 
      </ol> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          lists: [ 
            { id: 1, title: "臧三" }, 
            { id: 2, title: '李四' }, 
            { id: 3, title: "王五" }, 
          ] 
        } 
      }) 
    </script> 
  </body> 
</html>

v-show实例:v-show可以操作true/false来实现效果

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <input type="button" value="点击" v-on:click="a=false" /> 
      <div style="width: 100px;height: 100px;background: red;" v-show="a"> 
      </div> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          a: true 
        } 
      }) 
    </script> 
  </body> 
</html>

:class实例:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.js" ></script> 
    <style> 
      .red{ 
        color:red 
      } 
      .blue{ 
        background: blue; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="app"> 
      <p :class="{red:a,blue:b}">我是123</p> 
    </div> 
    <script> 
      new Vue({ 
        el:"#app", 
        data:{ 
            a:true, 
            b:true 
        } 
      }) 
    </script> 
  </body> 
</html>

第二种方法

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.js" ></script> 
    <style> 
      .red{ 
        color:red 
      } 
      .blue{ 
        background: blue; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="app"> 
      <p :class="json">我是123</p> 
    </div> 
    <script> 
      new Vue({ 
        el:"#app", 
        data:{ 
          json:{ 
            red:true, 
            blue:true 
          } 
        } 
      }) 
    </script> 
  </body> 
</html>

以上所述是小编给大家介绍的vue快捷键与基础指令详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 #Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 #Javascript
Vue.Draggable实现拖拽效果
Jul 29 #Javascript
JS请求servlet功能示例
Jun 01 #Javascript
vue.js加载新的内容(实例代码)
Jun 01 #Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 #Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 #Javascript
You might like
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php实现短信发送代码
2015/07/05 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
Json解析的方法小结
2016/06/22 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
js转换对象为xml
2017/02/17 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
Python+django实现简单的文件上传
2016/08/17 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
django有哪些好处和优点
2020/09/01 Python
python压包的概念及实例详解
2021/02/17 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
毕业自我鉴定书
2014/03/24 职场文书
班主任对学生的评语
2014/04/26 职场文书
爱心活动计划书
2014/04/26 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
学生偷窃检讨书
2014/09/25 职场文书
贷款承诺书
2015/01/20 职场文书