vue实现点击按钮,内容部分显示隐藏

<!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">
  <script src = "https://unpkg.com/vue/dist/vue.js" ></script>
  <title>Document</title>
</head>
<body>
  <div id="wrap">
    <p v-if="seen">出来了</p>
    <button type="button" name="button" @click="change">{{message}}</button>
  </div>
  <script type="text/javascript">
  var app = new Vue({
    el:‘#wrap‘,
    data:{
      seen:true,
      message:‘隐藏‘
    },
    methods:{
      change:function(){
         this.seen = !this.seen
         if (this.seen) {
            this.message = ‘隐藏‘
         }else{
           this.message = ‘显示‘
         }
      }
    }
  })
    // var date = new Date();
    // console.log(date);//Tue Sep 26 2017 14:34:27 GMT+0800 (CST)
    // console.log(new Date().toLocaleString());//2017/9/26 下午2:34:27
    // var d = new Date().getTime();
    // console.log(d);//1506408973192
    // console.log(new Date(d).toLocaleString());//2017/9/26 下午2:56
  </script>
</body>
</html>
时间: 2024-10-05 01:18:06

vue实现点击按钮,内容部分显示隐藏的相关文章

内容的显示/隐藏&amp;&amp;拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>显示/隐藏&&拖拽</title></head><style> *{ margin: 0; padding: 0; } #box{ position: relative; } input{ cursor: pointer;

点击按钮内容显示,再次点击隐藏

html代码: <div class="box">领取红包</div> <p class="main on">恭喜您获得300元红包抵用券</p> css: .box{width: 100px;height: 30px;background: #FA6A2F;text-align: center;line-height: 30px;border-radius: 10px;cursor: pointer;color: #

点击按钮弹框显示ListView,点击ListView某一项做出相应

最近在做上面描述的功能,网上找了个几个例子,拼拼凑凑整出来了效果,首先多谢http://www.cnblogs.com/miya2012/archive/2012/08/23/2652224.html,  代码实现差不多,特地做了个例子.附在最后? 不多说,先看效果图哈.      好了,上代码 MainActivity.java public class MainActivity extends Activity { private Button btn; private List<Strin

Android 仿iPhone ListView拖动排序 按钮联动删除显示隐藏

//需要修改ListView类 重写onInterceptTouchEvent()和onTouchEvent() //试验了另一种方法,改写ListView的每一行中拖曳图标的 onTouchEvent(),但效果不理想. public class MainActivity extends Activity { DeleteAdapter deleteAdapter; DragListView listView; boolean bFlag; ImageButton button; @Overr

BootStrap 模态框禁用空白处点击关闭,手动显示隐藏,垂直居中

$('#ajax_wait').modal({ backdrop: 'static', keyboard: false }); backdrop:static ,空白处不关闭. keyboard:false ,esc键盘不关闭. 上述代码同时打开模态框 当然,直接在模态框上加上data-backdrop="static"也可以. -------------------------------------------------------------------------------

基于jquery封装通用的控制显示隐藏的方法

应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写方法,不光费时间,还会让我们的代码显得异常冗余,因此我们写个通用方法! 附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

点击按钮实现隐藏和显示的切换代码

点击按钮实现隐藏和显示的切换代码:在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &

点击按钮复制文本内容 -- jquery Zclip -- Zero Clipboard

今天,经理让我做一个功能,复制文本框中的代码.以前在其他网站上经常见到过这个功能.只不过没有细细研究,今天也是个机会. 这里我使用的事jquery的zeroclipboard来实现复制功能.代码内容很简单,网上也有很多资料. Zero Clipboard作为一个独立的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf . 具体实现如下: jsp页面:  <p>                               

HTML5--》点击显示隐藏内容

<details>浏览器支持比较差,可以用JavaScript实现这种功能. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js点击显示隐藏内容</title> 6 <style type="text/css" > 7 body{font-size:12px;} 8 span{f