1. 程式人生 > >vue常用的指令

vue常用的指令

發生 tro app sna nbsp col 實例 spa 使用

vue常用的指令 <body> <div id="app"> <h1>{{ msg }}</h1> //數據寫入方式 <h2 v-text="msg"></h2> //v-text寫入數據,但是標簽名內不能再寫入其他的值,因為會被v-text覆蓋 <h2 v-once="msg">{{ msg }}</h3> //v-once本身不能寫入值,他只是制定標簽內的某個相關的值不會隨實例中數據動態發生改變
<h2>{{ msg }}</h2>
<input type="text" v-model="msg"> //使用v-model進行雙向綁定 讓h2標簽內的數據與表單裏面的數據聯動
<h2 v-bind:title="msg">給h2綁定title屬性</h2> //v-bind為h2標簽綁定title屬性 <h2 :title="msg">v-bind的簡寫方式</h2> //v-bind為h2標簽綁定title屬性的簡寫方式 <h2 v-bind={id:"id", class:"class"}>綁定id,className</h2> //v-bind也可以綁定一個對象
</div>
<script> var vm = new Vue({ el: "#app", data: { msg: "vue中常用指令!" } }) </script> </body>

vue常用的指令