2018-09-12/13

2018-09-12

v-model:雙向數(shù)據(jù)綁定，用于表單元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
       <input type='text' v-model='name'>
        <p>{{name}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                name:'lzgxh',
                num:''
            }
        })
    </script>
</body>
</html>

屏幕展示：
1.png

v-on:事件名="函數(shù)名" (v-on:click="alt")；綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <button v-on:click='alt'>按鈕</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                msg:'hollo'
            },
            methods:{
                alt:function(){
                    alert(000)
                    console.log(this.msg)
                }
            }
        })
    </script>
</body>
</html>

屏幕展示：
2.png

v-on:click="函數(shù)名"，點(diǎn)擊按鈕來(lái)回切換；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <p>{{msg}}</p>
        <button v-on:click='h'>on</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                msg:'heihei',
                flag:true
            },
            methods:{
                h:function(){
                  /* this.msg='aaa' */
                    if(this.flag){
                        this.msg='idh',
                        this.flag=false
                    }else{
                        this.msg='heihei',
                        this.flag=true
                    }
                }
            }
        })
    </script>
</body>
</html>

屏幕展示：
3.png

4.png

v-model=''; v-on:click='函數(shù)名'; v-for=''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <input type="text" v-model='txt'>  <button v-on:click='add'>添加</button>
       <ul>
           <li v-for="(value,index) in arr">
              {{value}}
              <button v-on:click='delt(index)'>刪除</button>
           </li>
       </ul>
   </div>
    <script src="vue.js"></script>
    <script>
    
       new Vue({
           el:'#itany',
           data:{
               arr:['吃飯','睡覺(jué)','打游戲'],
               txt:''
           },
           methods:{
               add:function(){
                   this.arr.push(this.txt),
                    this.txt=''
               },
               delt:function(ind){
                   this.arr.splice(ind,1)
               }
           }
       })
    </script>
</body>
</html>

屏幕展示：效果:點(diǎn)擊添加刪除

5.png

2018-09-13

v-bind:屬性名="值"; v-bind:src="url"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <img v-bind:src="url">
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                url:'icon1.png'
            }
        })
    </script>
</body>
</html>

屏幕顯示：用v-bind:src='url'添加一張圖片

v-bind:src='url',v-on:click='函數(shù)名'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <img v-bind:src="url" alt="" v-on:click='hs'>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                url:'icon1.png'
            },
            methods:{
                hs:function(){
                    this.url="page2-img1.jpg"
                }
            }
        })
    </script>
</body>
</html>

屏幕顯示：點(diǎn)擊圖片來(lái)回切換

v-bind:src='url',v-on:click='函數(shù)名' ，v-for=''循環(huán)數(shù)組對(duì)象數(shù)組對(duì)象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <img v-bind:src="url" alt="">
        <ul>
            <li v-for='(value,index) in arr' v-on:click='cha(index)'>{{index+1}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script> 
        new Vue({
            el:'#itany',
            data:{
               arr:['s5.jpg','s6.jpg','s7.jpg','s8.jpg','s9.jpg'],
               url:'s5.jpg'
            },
            methods:{
                cha:function(i){
                   this.url=this.arr[i]
                }
            }
        })
    </script>
</body>
</html>

選項(xiàng)卡：點(diǎn)擊數(shù)字來(lái)回切換圖片

6.png

v-show=‘’ 控制元素的顯示和隱藏使用display:none隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <h1>{{one}}</h1>
        <h3 v-show='!two'>{{two}}</h3>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                one:'good',
                two:true
            }
        })
    </script>
</body>
</html>

屏幕展示：
7.png

v-on:click='函數(shù)名'， v-show=''控制元素的現(xiàn)實(shí)和隱藏 使用display:none隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #a{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="itany">
       <button v-on:click='ch'>點(diǎn)擊</button>
        <div id="a" v-show='see'></div>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                see:true
            },
            methods:{
                ch:function(){
                    this.see=!this.see
                }
            }
        })
    </script>
</body>
</html>

屏幕顯示：效果：點(diǎn)擊按鈕（隱藏顯示）

8.png

v-if=''

v-else-if=''

v-else-if=''

v-else=''

[隨機(jī)出現(xiàn)：num:Math.floor(Math.random()*(max-min+1)+min)]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <p v-if='num==0'>00000000000</p>
       <p v-else-if='num==1'>1111111111</p>
       <p v-else-if='num==2'>22222222</p>
       <p v-else='num==5'>555555555555</p>
      
   </div>
    <script src="vue.js"></script>
    <script>
    
       new Vue({
           el:'#itany',
           data:{
//               num:Math.floor(Math.random()*(max-min+1)+min)
               num:Math.floor(Math.random()*(5-0+1)+0)
           }
       })
    </script>
</body>
</html>

屏幕顯示：刷新頁(yè)面隨機(jī)出現(xiàn)其一
9.png

10.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容