Vue 基礎指令學習
阿新 • • 發佈:2018-12-03
學習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的指令,後面還會有的。