技術標籤：Vuevue

vue 指令

// v-text 文字
<p v-text="msg"></p>
<script>
var app=new Vue({
    el:"#app",
    data:{
        msg:"文字"
    },
})

</script>

// v-html    設定標籤的 innerHTML
<p v-heml="msg"></p>
<script>
var app=new Vue({
    el:"#app",
    data:{
        msg:"<a href="baidu.com">百度</a>"
    },
})

</script>

//元素繫結事件  v-on:click="getUser"  v-on:monseenter="getUser"  v-on:dblclick="getUser" v-on可以用@代替
<script>
var app=new Vue({
    el:"#app",
    methods:{ // 寫繫結的事件方法
        getUser:function(){
            console.log("admin")
        }
    }

})

</script>

//根據表示式切換顯示、隱藏 v-show="isShow" 操作樣式  v-if 操作dom元素
<script>
var app=new Vue({
    el:"#app",
    data:{
        isShow:false
    },
    methods:{ // 寫繫結的事件方法
        changeIsShow:function(){
            this.isShow = !this.isShow;
        }
    }

})

</script>

//設定元素的屬性 v-bind:src    簡潔語法 :src
<img v-bind:src="imgSrc">
<script>
var app=new Vue({
    el:"#app",
    data:{
        imgSrc:"地址"
    }
})

</script>

//根據資料生成列表結構 v-for="item in arr"    v-for="(item,index) in arr" index代表索引
<li v-for="item in arr">{{index+1}}  {{item}}</li>
<script>
var app=new Vue({
    el:"#app",
    data:{
        arr:[1,2,3]
    }
})

</script>

// 鍵修飾符 <input @keyup.enter="onEnter">

// 獲取和設定表單元素的值（雙向資料繫結） v-model="msg"
<script>
var app=new Vue({
    el:"#app",
    data:{
        msg:"訊息"
    }
})

</script>