Vue_小练习

Posted 2021-11-09 panjingshuang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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=‘../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_小练习的主要内容，如果未能解决你的问题，请参考以下文章

小片段中的 ORA-06512 [重复]

回归 | js实用代码片段的封装与总结（持续更新中...）

[前端练习小Demo]分别用jquery和vue实现轮播图

Vue练习五十八：07_03_移动效果(按轨迹移动)

小技巧