RTaW—基於車載乙太網TSN的下一代E/E架構設計優化工具
阿新 • • 發佈：2022-05-31
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- 資料渲染 --> <div id="app"> <!-- 模板語法 --> <div> <span>{{ message }}</span> <span v-once>這個將不會改變: {{ message }}</span> <!-- 輸出真正的 HTML --> <span v-html="message"></span> <!-- 屬性繫結 雙大括號不能在 HTML attributes 中使用 --> <!-- <div v-bind:id="dynamicId"></div> --> </div> <!-- 條件渲染 --> <div> <h1 v-if="flag">Vue is awesome!</h1> <h1 v-else>false</h1> <!-- <template> 元素當做不可見的包裹元素 --> <template v-if="flag"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> <div v-if="type === 'A' "> Now you see me </div> <div v-else-if="type === 'B' "> Now you don't </div> <div v-else> Not A/B/C </div> </div> <!-- 列表渲染 --> <div> <div v-for="(item, index) in array" v-bind:key='item.id' > {{index}} + {{item.message}} + {{item.name}} </div> <div v-for="(value, name) in object"> {{name}} + {{value}} </div> </div> <!-- 事件處理 --> <div> <!-- v-on 指令監聽 DOM 事件 --> <div> <button v-on:click="fun">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> </div> <!-- 雙向繫結 --> <div> <!-- v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向資料繫結。 --> <input v-model="message"> <p>Message is: {{ message }}</p> <!-- 多選框 繫結的是value --> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <br> <span>Checked names: {{ checkedNames }}</span> <!-- selected --> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> </div> </body> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script> //建立vue例項 ，viewModel層 var app = new Vue({ //掛載元素 el : "#app", data : { message : "vue", flag : true, type : 'A', array: [ { id: 1, message: 'Foo' , name : 'L' }, { id: 2, message: 'Bar' , name : 'M'} ], object : { title: 'How to do lists in Vue', author: 'Jane Doe', }, counter : 0, checkedNames: [], selected: "" }, methods : { fun: function(e){ console.log(e) console.log(this); this.counter = this.counter + 1; } }, //生命週期函式 例項建立之後 created : function (){ //this app例項 this.message = "str" } }) </script> </html>