image是否有disabled属性_Vue学习笔记 模板语法、计算属性
生活随笔
收集整理的這篇文章主要介紹了
image是否有disabled属性_Vue学习笔记 模板语法、计算属性
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
點(diǎn)擊上方“藍(lán)字”關(guān)注我們吧！
vue學(xué)習(xí)筆記
官網(wǎng)：https://cn.vuejs.org/v2/guide/
1、vue體驗(yàn)
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>系統(tǒng)名稱：{{title}}h1> <ul> <li v-for="(item, i) in products"> 名稱：{{item.name}}，庫(kù)存：{{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: "管理系統(tǒng)", products: [ { name: "iphone", stock: 1 }, { name: "xiaomi", stock: 2 }, ], }, methods: { remove(i) { this.products.splice(i, 1); }, }, });script> body>html>vue實(shí)例中data介紹：https://cn.vuejs.org/v2/api/#data
模板語(yǔ)法
官網(wǎng)介紹：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>系統(tǒng)名稱：{{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">縮寫(xiě)v-binddiv> <button v-bind:disabled="isButtonDisabled">Buttonbutton> <p v-if="seen">if 現(xiàn)在你看到我了p> <p v-else>else 現(xiàn)在你看到我了p> <button v-on:click="counter += 1">Add 1button> <button @click="counter += 1">縮寫(xiě) 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>計(jì)算屬性 fullName: {{ fullName }}p> <p>方法 fullName: {{ getFullName() }}p> div> <script src="./vue.min.js">script> <script> var vm = new Vue({ el: "#app", data: { title: "管理系統(tǒng)", products: [ { name: "iphone", stock: 1 }, { name: "xiaomi", stock: 2 }, ], msg: "“Mustache”語(yǔ)法 (雙大括號(hào))", 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` 在方法里指向當(dāng)前 Vue 實(shí)例 alert('Hello ' + this.title + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } }, } });script> body>html>tips 計(jì)算屬性和方法的區(qū)別
計(jì)算屬性可以賦值，方法不行
計(jì)算屬性會(huì)進(jìn)行緩存，如果依賴屬性不變，會(huì)直接使用緩存結(jié)果，不會(huì)進(jìn)行重新計(jì)算
特殊屬性：key
官網(wǎng)鏈接：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>手機(jī)號(hào)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-轉(zhuǎn)發(fā)，點(diǎn)贊，在看，安排一下？總結(jié)
以上是生活随笔為你收集整理的image是否有disabled属性_Vue学习笔记 模板语法、计算属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java中for的常规用法_Java f
- 下一篇： 前端导出excel文件带样式_vue前端