码迷,mamicode.com
首页 > 其他好文 > 详细

Vue_小练习

时间:2019-03-26 16:51:44      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:pat   null   opened   今天   ble   utf-8   content   idt   NPU   

技术图片
<!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=‘../lib/vue-2.4.0.js‘></script>
     <title>title</title>
</head>
<body>
    <div id=‘app‘>
        <input type="text" v-model="str1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="str2">
        <button @click="result">=</button>
        <input type="text" v-model="str3">
    </div>
    <script>
        var  demo  = new Vue({
             el: #app,
            data: { 
                str1:0,
                str2:0,
                str3:0,
                opt:-
            },
            methods:{
                result(){
                    var codeStr = parseFloat(this.str1)+this.opt+parseFloat(this.str2)
                    this.str3 = eval(codeStr)
                }

            }
     })
    </script>
</body>
</html>
v-model下的简易 计算器
技术图片
<!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=‘../lib/vue-2.4.0.js‘></script>
     <title></title>
</head>
<body>
    <div id=‘app‘>
        <button @click="start">触发</button>
        <button @click="stop">停止</button>
        <p>{{str}}</p>
    </div>
    <script>
        var  demo  = new Vue({
             el: #app,
            data: { 
                str:"今天天气好晴朗,处处好风光!",
                flag:null
            },
            methods:{
                start(){

                if (this.flag!=null){
                    return 
                }
                 this. flag =  setInterval(()=>{

                    var start1 = this.str.substring(0,1)
                    var end1 = this.str.substring(1)
                    this.str = end1 + start1

                    },400)    
                },
                stop(){
                    clearInterval(this.flag)
                    this.flag =null
                }
            }
     })
    </script>
</body>
</html>
v-model下的跑马灯实验

 

Vue_小练习

标签:pat   null   opened   今天   ble   utf-8   content   idt   NPU   

原文地址:https://www.cnblogs.com/panjingshuang/p/10600963.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!