vue基本語法

• • 1. 前言
  • 2. 數據綁定v-bind
  • 3. v-if || v-else-if || v-else 條件判斷
  • 4. v-for 循環
  • 5. v-on 元素監聽事件

1. 前言

vue語法，基本照著官網的來的，也有一些看了b站某kuang的視頻，受了些啟發。

<div id="app">// 取data 中show標簽的值<label>{{ show }}</label> </div> new Vue({// 根據id獲取對應的元素el: "#app1",data: {// 數據存放的地方，show為自定義標簽show: "bitQian adorable.."} })

2. 數據綁定v-bind

可以動態的給頁面元素綁定數據，數據寫在data自定義標簽中。
頁面元素使用v-bind語法綁定html的屬性。

<!-- 給label標簽設置標題 --> <div id="app1"><label v-bind:title="show">hello vue.js</label> </div> new Vue({el: "#app1",data: {show: "bitQian adorable.."} })

在生產中也可以在組件循環中綁定值，綁定a標簽的href屬性等等

3. v-if || v-else-if || v-else 條件判斷

if-else

<div id="app"><span v-if="ok">ok</span><span v-else>bad</span> </div> new Vue({el: "#app",data: {ok: 1==1} });

if else if else 組合，type的bool判斷通過三個等號

<div id="app1"><span v-if="type==='A'">A</span><span v-else-if="type==='B'">B</span><span v-else>C</span> </div> new Vue({el: "#app1",data: {type: "A"} });

4. v-for 循環

item是每一項，items對應data里面的items

<div id="app3"><span v-for="item in items">item: {{ item }}, id: {{ item.id }}, name: {{ item.name }} <br/></span> </div> let app3 = new Vue({el: "#app3",data: {// items表示一個數組，里面裝了兩個人items: [{"id": 1, "name": "jack"},{'id': 2, "name": "rose"}]} });

5. v-on 元素監聽事件

簡單來說，就是給元素綁定js事件，如點擊，鼠標懸浮，鍵盤觸發事件等
這里以點擊事件綁定展示，反轉消息

<!-- v-on 綁定方法 --> <div id="app3"><p>{{ message }}</p><!-- click為點擊事件，也可根據場景換成其它事件 --><input type="button" v-on:click="reverseMessage" value="reverse"> </div> new Vue({el: "#app3",data: {message: "hello world!"},methods: {reverseMessage: function () {// 當我點擊按鈕時，顯示在p標簽里面的hello world!反轉this.message = this.message.split("").reverse().join("")}} });

總結

以上是生活随笔為你收集整理的vue中的数据单向绑定，判断，循环，函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。