<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if、v-else、v-show</title>
    <script src="../js/vue.js"></script>
    <!--copy from http://vuejs.org.cn/guide/-->
</head>
<body>
    <div id="app">
        <p v-if="willShow">显示</p>
        <p v-else>隐藏</p>
        <button @click="fn()">改变</button>
    </div>
    <script>
        var vm=new Vue({
el:"#app",
data:{
willShow:true
},
methods:{
fn:function(){
if(this.willShow==true){
this.willShow=false;
}else{
this.willShow=true
}
}
}
});
</script>
</body>
</html>

Vuejs methods how to use的更多相关文章

  1. vuejs学习笔记(1)--属性,事件绑定,ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  2. vuejs学习笔记(2)--属性,事件绑定,ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  3. 开始使用 Vuejs 2.0 ---简单总结2

    Vuejs的常用指令 v-html v-show v-if v-for v-on 1 .v-html v-html 更新元素或者变量的innerHTML,按普通html解析,和v-text的区别是在变 ...

  4. vue入门:(事件处理)

    基本应用 修饰符 为什么要在HTML中使用事件监听 Demo 一.基本应用 1.通过v-on指令绑定事件,例如: <button v-on:click="">提交< ...

  5. Vuejs中关于computed、methods、watch的区别。

    Vue.js在模板表达式中限制了,绑定表达式最多只能有一条表达式,但某些数据需要一条以上的表达式运算实现,此时就可以将此数据放在计算属性(computed)当中. Vuejs中关于computed.m ...

  6. Vuejs中关于computed、methods、watch,mounted的区别

    1.computed是在HTML DOM加载后马上执行的,如赋值: 2.methods则必须要有一定的触发条件才能执行,如点击事件: 3.watch呢?它用于观察Vue实例上的数据变动.对应一个对象, ...

  7. 使用vuejs框架进行列表渲染

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...

  8. vuejs的动态过滤

    想要通过vuejs动态过滤(这里动态指得是过滤的条件是动态变化的), 一直没找到好办法, 最蠢的办法当然是两个两个数组,一个作为原始副本数组 一个作为视图数组,这样当过滤条件变化的时候 动态拷贝原始数 ...

  9. Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器

    (八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵 ...

随机推荐

  1. 微信js分享朋友圈(二)

    近期又用到微信分享的功能了.虽然不是第一次用了,依然我又有幸踩到了一个坑,所以分享一下吧. 根据微信sdk写的代码一步步很顺利,但是后面就是获取微信返回的分享结果的回调的时候IOS老是有问题,然后就网 ...

  2. 100个常用的linux命令(转)

    原文:http://blogread.cn/it/article/6368?f=wb 1,echo “aa” > test.txt 和 echo “bb” >> test.txt / ...

  3. oracle中 rownum 与 connect by的结合使用

    原文:http://blog.sina.com.cn/s/blog_a26966d90102wwkb.html oracle中 rownum 与 connect by的结合使用 SELECT ROWN ...

  4. Spark应用日志级别设置

    一. 日志效率原因 开发时,控制台输出一大堆日志信息,严重影响查看日志效率.   从控制台输出日志我们可以看出,应用程序是默认加载Spark-core包下面的log4j-defaults.proper ...

  5. jenkin构建项目执行脚本后,脚本中启动的进程也随之关闭的解决办法

    问题描述: 之前用jenkins构建项目(maven项目)后都是通过ssh先将war文件推送到远程服务器,然后执行远程的脚本(更新项目,重启tomcat),一直没有出现问题,今天使用jenkins构建 ...

  6. web.xml中的元素

    error-page元素包含三个子元素error-code,exception-type和location.将错误代码(Error Code)或异常(Exception)的种类对应到web应用资源路径 ...

  7. JPG PNG GIF 的优缺点

    pg/jpeg:优点:体积比png小,打开速度比png快缺点:属于有损压缩,每次保存都会产生数据损失(jpeg artifacts), 故不适合用于多次编辑保存.压缩率过高图像会失真PS:网络上最最常 ...

  8. python3 对excel读、写、修改的操作

    一.对excel的写操作实例: 将一个列表的数据写入excel, 第一行是标题,下面行数具体的数据 import xlwt #只能写不能读 stus = [['姓名', '年龄', '性别', '分数 ...

  9. Selenium-IDE,Selenium-RC ,Selenium grid以及 Selenium-Core

    Selenium-IDE,Selenium-RC ,Selenium grid 以及 Selenium-Core Selenium 是一种 Web 应用的自动测试工具,通过模拟用户对 Web 页面的各 ...

  10. ruby中的可调用对象--proc和lamdba

    ruby中将块转变成对象的三种方法 ruby中的大部分东西都是对象,但是块不是.那么,如果你想存下来一个块,方便以后使用,你就需要一个对象.ruby中有三种方法,把块转换成可以利用的对象. Proc. ...