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 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
vue弹窗消息组件的使用方法
Sep 24 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
小程序实现订单倒计时功能
Apr 23 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Vuex实现简单购物车
2021/01/10 Vue.js
Python中datetime常用时间处理方法
2015/06/15 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python实现内存监控系统
2021/03/07 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python类如何定义私有变量
2020/02/03 Python
python圣诞树编写实例详解
2020/02/13 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
python怎么判断模块安装完成
2020/06/19 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
Ref与out有什么不同
2012/11/24 面试题
Linux文件操作命令都有哪些
2015/02/27 面试题
建材业务员岗位职责
2013/12/08 职场文书
中层干部培训方案
2014/06/16 职场文书
销售目标责任书
2014/07/23 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
会计稽核岗位职责
2015/04/13 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js