1. 程式人生 > >Vue 基礎指令學習

Vue 基礎指令學習

學習Vue的一些總結,第一次寫部落格,文筆實在是很差 不過我會不斷寫的。

<template>
    <!--只能有一個根節點 -->
    <div>
        <pre>
            *v-text  是元素的innertext 只能在雙標籤中使用
            *v-html  是元素的innerHTML,不能包含<!-- {{xxx}} -->
            *v-if 元素是否移除或者插入
            *v-show  元素隱藏或者顯示
            *v-model  雙向資料繫結
        
</pre> // v-text <span v-text="text"></span> <hr> <span v-html="html"></span> v-if: <div v-if="isShow" style="height:100px;background:#562366;"></div> v-show: <div v-show="isShow" style="height:100px;background:#333;"></div> v-model:
<input type="text" name="" v-model="mText"> {{mText}} <!-- 給下面的input的value賦值用v-bind:value --> <br> <input type="text" name="" v-bind:value="mText"> </div> </template> <<script> export default { data(){
return { text:'我是v-text玩的東西', html:` <ul> <li>vksdnkfndk </li> <li>kbnskdfkb </li> </ul> `, isShow:false, mText:'' } } } </script>

這裡只寫了一部分常用的vue的指令,後面還會有的。