[vue] 時計の自動応答の小さなケース

vue のウォッチ リスナーを使用して、自動応答の小さなケースを作成します。

<body>
    <div id="app">
        <input type="text" v-model='msg'>
        答案:{
   
   {msg2}}
    </div>
</body>

<script src="../vue.js"></script>
<script>
    let vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            msg:'',//用户输入的数据
            msg2:''//用来弹出的数据
        },
        watch:{
     
     
            msg(){
     
     //监听input里的msg内容
                //用includes()和indexOf()选取input框里的问号来做判断
                if(this.msg.includes('?')||this.msg.indexOf('?')!=-1){
     
     
                //用Math.random()<0.7来调整百分之70的概率为好,百分之30的概率为不好
                    this.msg2=Math.random()<0.7?'好':'不好'
                }
            }
        }
    })
</script>

Web ページの効果: 良好です。自動的にポップアップします。
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_48772762/article/details/109025347