Vue3系列3--模板語法和vue指令

来源:https://www.cnblogs.com/lotusflower/archive/2022/08/04/16550758.html
-Advertisement-
Play Games

1 模板插值語法 在script 聲明一個變數可以直接在template 使用用法為{{變數名稱}} 模板語法是可以編寫條件運算的 運算也是支持的 操作API 也是支持的 <template> {{ message }} {{ message2==0 ? '我是老大' : '我笑的' }} {{ m ...


1 模板插值語法

  • 在script 聲明一個變數可以直接在template 使用用法為{{變數名稱}}
  • 模板語法是可以編寫條件運算的
  • 運算也是支持的
  • 操作API 也是支持的
<template>
  {{ message }}
    {{ message2==0 ? '我是老大' : '我笑的' }}
    {{ message2 + 1 }}
    {{ message.split('').map(v => `4546$v`) }}
</template>

<script setup lang="ts">
const message = "我是唐少"
const message2:number = 1
</script>
<style>
</style>    

2 指令

  • v- 開頭都是vue 的指令
  • v-text 用來顯示文本
  • v-html 用來展示富文本
  • v-if 用來控制元素的顯示隱藏(切換真假DOM)
  • v-else-if 表示 v-if 的“else if 塊”。可以鏈式調用
  • v-else v-if條件收尾語句
  • v-show 用來控制元素的顯示隱藏(display none block Css切換)
  • v-on 簡寫@ 用來給元素添加事件
  • v-bind 簡寫: 用來綁定元素的屬性Attr
  • v-model 雙向綁定
  • v-for 用來遍歷元素

v-on修飾符 冒泡案例:

<template>
  <div @click="parent">parent
    <div @click.stop="child">child</div>
  </div>
</template>
 
<script setup lang="ts">
const child = () => {
  console.log('child');
 // 點擊後不會答應parent,因為被阻止了
}
const parent = () => {
  console.log('parent');
}
 
</script>

阻止表單提交案例:

<template>
  <form action="/">
    <button @click.prevent="submit" type="submit">submit</button>
  </form>
</template>
 

<script setup lang="ts">
const submit = () => {
  console.log('child');
 
}
 
</script>
 
 
<style>
</style>

v-bind 綁定class 案例 1:

<template>
  <div :class="[flag ? 'active' : 'other', 'h']">456789</div>
</template>
 
<script setup lang="ts">
const flag: boolean = false;// 改成true後切換不同的效果
</script>
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 綁定class 案例 2:

<template>
  <div :class="flag">{{flag}}</div>
</template>
 // 直接綁定cls
<script setup lang="ts">
type Cls = {
  other: boolean,
  h: boolean
}
const flag: Cls = {
  other: false,
  h: true
};
</script>
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 綁定style案例:

<template>
  <div :style="style">綁定style</div>
</template>
 
<script setup lang="ts">
type Style = {
  height: string,
  color: string
}
const style: Style = {
  height: "300px",
  color: "blue"
}
</script>
 
<style>
</style>

v-model 案例:

<template>
  <input v-model="message" type="text" />
  <div>{{ message }}</div>
</template>
 
 
<script setup lang="ts">
import { ref } from 'vue' // 實時監聽
const message = ref("message") 
</script>
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 語聊房應用場景說明 七夕禮物準備好了嗎?程式猿七夕禮物標配,給女友搭建專屬語聊房,既浪漫又硬核! 語聊房在社交場景中使用比較廣泛,社交APP中的語聊房場景的實現,主要由業務系統和移動/Web 客戶端組成。其中業務系統需要實現語聊房的房間管理、麥位管理、音頻流和麥位關聯關係管理等功能,客戶端需要實 ...
  • 一.頁面導航 1.聲明式導航 通過navigator來跳轉 1.1 導航到tabBar頁面 比如跳轉到tabBar頁面就需要navigator來跳轉,要用到他的url和open-type屬性 1.2 導航到非tabBar頁面 非tabBar頁面只是沒有配置為tabBar的頁面,註意還是頁面 配置其他 ...
  • 七夕來咯!又到了給重要的人送驚喜的時刻。 今年,除了將心意融入花和禮物,作為程式員,用自己的代碼本事手搓一個技術感十足“七夕限定”驚喜,我覺得,這是不亞於車馬慢時代手寫信的古典主義浪漫。 那麼,應該怎樣創作出具有自我身份屬性的浪漫七夕驚喜呢? 玩法很多,今天給大家介紹一個不出錯的技術控浪漫實操方式— ...
  • 一.WXML模板語法 1.1 數據綁定 綁定內容 跟vue差不多,在頁面的js文件定義到data裡面 然後通過插值語法用在wxml中即可 綁定屬性 直接寫上插值語法,沒有: 三元運算 生成一個十以內的隨機數 算數運算 1.2 事件綁定 小程式常用事件 小程式事件對象常用屬性 target和curre ...
  • 變數提升題目: (function(){ a=5 console.log(window.a) var a=10 console.log(a) })() 答案如下(還請先思考哦) //編譯後 (function(){ var a; a=5; console.log(window.a) //undefi ...
  • BOM BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) BOM的結構 window 概述: window是頂層對象 屬於 ...
  • 1 ref 接受一個內部值並返回一個響應式且可變的 ref 對象。ref 對象僅有一個 .value property,指向該內部值。 案例 <template> <div> <button @click="changeMsg">change</button> <div>{{ message }}< ...
  • JS相容問題總結 “標準瀏覽器”和“低版本瀏覽器(IE)”相容寫法 一、瀏覽器捲去的高度和寬度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop var scrollLeft = documen ...
一周排行
    -Advertisement-
    Play Games
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...