首页 > 代码库 > 一个简单的vue小例子之倒计时

一个简单的vue小例子之倒计时

2024-09-24 01:28:12   216人阅读

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <title>测试</title>
  <script src="http://www.mamicode.com/static/public/css/custom/jquery-3.1.1.min.js"></script>
<script src=http://www.mamicode.com/"http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>

</head>
<body>
<div id="box">
  <button v-on:click="times">点击</button>
  <p>倒计时:{{time}}</p>
</div>
<script>
  var count=11;
new Vue({
  el:"#box",
  data:{
      time:count,
    list:[{}]
  },
  methods:{
    times(){
      var self=this;
      setInterval(function () {
        self.time=count
        Vue.set([self.time],‘time‘,count)
        count--
        if(count<=0){
            count=0
        }
      },1000)
    }
  }
})
</script>
</body>
</html>

测试

 

倒计时:{{time}}

<script type="text/javascript">// </script>

技术分享
技术分享
Vue.set()官方文档解释说明：
文档地址：https://cn.vuejs.org/v2/api/#Vue-set
Vue.set( object, key, value )
  • 参数：
    • {Object} object
    • {string} key
    • {any} value
  • 返回值： 设置的值.
  • 用法：
    设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
    注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象
一个简单的vue小例子之倒计时






























        

            
                
                  
                
                

                    联系

                    我们