目錄
- demo的三部分結構
- 判斷：v-if、v-else-if、v-else
- 回圈：v-for
- 事件系結 v-on:eventType
- 內容輸入的雙向系結v-model
原始碼：Github
demo的三部分結構
- 通過
script src引入``vue相關js`檔案
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 在
body中的div里通過id系結``vue`物件
<div id="app">
<!-- message output -->
<h1>{{message}}</h1>
</div>
- 在
js代碼里實作物件的系結，初始化值、成員函式已經其他在生命周期里可能存在的鉤子函式，
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello Vue",
ok: true,
items: [{
value: "List item 1"
}, {
value: "List item 2"
}, {
value: "List item 3"
}],
username: "",
input2: "",
},
methods: {
clickButton: function() {
this.message = "button clicked ... ";
this.ok = false;
}
},
})
</script>
判斷：v-if、v-else-if、v-else
<!-- if else -->
<h2 v-if="ok===true">Yes</h2>
<h2 v-else>No</h2>
回圈：v-for
<!-- for loop -->
<ol v-for="(item, index) in items" :key="index">
<li>{{index}}--{{item.value}}</li>
</ol>
事件系結 v-on:eventType
<button v-on:click="clickButton()">Click me</button>
內容輸入的雙向系結v-model
在v-model.lazy情況下，更改了輸入框內容后不會即時更新，而是在輸入框失去焦點后更新，
<!-- v-model bind -->
<div>
<span>input value:</span>
<input type="text" v-model="username"><br>
<!-- <input type="text" v-model.lazy="username"><br> -->
<span> value is:</span>
<label>{{username}}</label>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/212426.html
標籤：其他
上一篇：后端狗的Vue學習歷程(一) - demo示例與基本邏輯語法
下一篇：企業資訊化遇到的瓶頸及問題