image是否有disabled属性_Vue学习笔记 模板语法、计算属性
生活随笔
收集整理的這篇文章主要介紹了
image是否有disabled属性_Vue学习笔记 模板语法、计算属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
點擊上方“藍字”關注我們吧！
vue學習筆記
官網：https://cn.vuejs.org/v2/guide/
1、vue體驗
demo示例：
image.png示例代碼：
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Documenttitle> head> <body> <div id="app"> <h1>系統名稱：{{title}}h1> <ul> <li v-for="(item, i) in products"> 名稱：{{item.name}}，庫存：{{item.stock}} <button @click="remove(i)">刪除button> li> ul> div> // 引入vue <script src="./vue.min.js">script> <script> var vm = new Vue({ el: "#app", data: { title: "管理系統", products: [ { name: "iphone", stock: 1 }, { name: "xiaomi", stock: 2 }, ], }, methods: { remove(i) { this.products.splice(i, 1); }, }, });script> body>html>vue實例中data介紹：https://cn.vuejs.org/v2/api/#data
模板語法
官網介紹：https://cn.vuejs.org/v2/guide/syntax.html
demo示例：
示例代碼：
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Documenttitle> head> <body> <div id="app"> <h1>系統名稱：{{title}}h1> <span>message: {{ msg }}span> <br> <span v-once>once message: {{ msg }}span> <br> <p>Using mustaches: {{ rawHtml }}p> <span>Using v-html directive:span> <p v-html="rawHtml">p> <div v-bind:id="dynamicId">v-binddiv> <div :id="dynamicId">縮寫v-binddiv> <button v-bind:disabled="isButtonDisabled">Buttonbutton> <p v-if="seen">if 現在你看到我了p> <p v-else>else 現在你看到我了p> <button v-on:click="counter += 1">Add 1button> <button @click="counter += 1">縮寫 Add 1button> <p>The button above has been clicked {{ counter }} times.p> <button v-on:click="greet">Greetbutton> <br> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}p> <p>firstName: {{ firstName }}p> <p>lastName: {{ lastName }}p> <p>計算屬性 fullName: {{ fullName }}p> <p>方法 fullName: {{ getFullName() }}p> div> <script src="./vue.min.js">script> <script> var vm = new Vue({ el: "#app", data: { title: "管理系統", products: [ { name: "iphone", stock: 1 }, { name: "xiaomi", stock: 2 }, ], msg: "“Mustache”語法 (雙大括號)", rawHtml: 'html', dynamicId: "v-bind", isButtonDisabled: false, seen: false, counter: 0, message: "", firstName: "hu", lastName: "xq", }, computed: { fullName() { console.log("+++"); return this.firstName + this.lastName; }, }, methods: { getFullName() { console.log("---"); return this.firstName + this.lastName; }, greet: function (event) { // `this` 在方法里指向當前 Vue 實例 alert('Hello ' + this.title + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } }, } });script> body>html>tips 計算屬性和方法的區別
計算屬性可以賦值，方法不行
計算屬性會進行緩存，如果依賴屬性不變，會直接使用緩存結果，不會進行重新計算
特殊屬性：key
官網鏈接：https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0
示例代碼：
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Documenttitle> head> <body> <div id="app"> <h1>登錄h1> <div v-if="loginType=='mobile'"> <label>手機號label> <input type="text" key="mobile"/> div> <div v-else> <label>郵箱label> <input type="text" key="email"/> div> <div> <button @click="loginType = loginType=='mobile'?'email':'mobile'">切換登錄方式button> div> div> <script src="./vue.min.js">script> <script> var vm = new Vue({ el: "#app", data: { loginType: "mobile", }, methods: { }, });script> body>html>-END-轉發，點贊，在看，安排一下？總結
以上是生活随笔為你收集整理的image是否有disabled属性_Vue学习笔记 模板语法、计算属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java中for的常规用法_Java f
- 下一篇： html5倒计时秒杀怎么做,vue 设