Vue.js 極簡小例:讀值、樣式調用、if判斷、a 標簽、點擊事件、管道
小編:管理員 86閱讀 2022.08.19
1. 寫法:
<template> <div id="app"> <!-- 三目運算符使用 ‘ok’ 的值定義在 data 中--> {{ ok ? 'YES' : 'NO' }}<br><br> <!-- 修改樣式 class1 設置為 true 時顯示樣式 (頁面上勾選單選框即設置為 true)--> <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1"> <br> <div v-bind:class="{'class1': class1}"> 我會變背景顏色 </div> <!-- if判斷 --> <p v-if="seen"> seen 設置為true , 你就能看到我了 </p> <!-- 參數在指令后以冒號指明 1.‘ v-bind:href="url" ’可以簡寫為:‘ :href="url"’ 2.target參數作用:新窗口打開 --> <pre><a v-bind:href="url" :target="target">這是鏈接</a></pre> <!-- 點擊事件 ‘v-on:click=’可以簡寫為:‘@click=’ --> <button v-on:click="doSomething">點擊事件</button> <br><br> <!-- 管道處理數據 message 原值:this (slice方法是切片,去掉前n位字母) --> {{ message | capitalize }} </div> </template> <script> export default { name: 'APP-two', data () { return { ok: true, class1: false, seen: true, url: 'https://blog.csdn.net/jiangyu1013', target:'_blank', message:'this' } }, methods: { doSomething: function() { alert(" 我要給小熊造一個完美世界!"); } }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(3).toUpperCase() + value.slice(1) } } } </script> <style> .class1{ background: #444; color:white } </style>復制
2. 運行效果:(seen 設置為 true )

相關推薦
- Vue3(二)工程化開發方式做項目 工程化的開發方式這是開發中、大型項目的必備技能,網上資料也很多,這里只是一個簡單的綜合性的介紹。包括vue的全家桶、建立項目的幾種方式、UI庫的簡單使用等?梢院蜕弦黄腸nd方式做項目做一下對比。node.js,npm、cnpm、yarnnode.js執行 npm run serve ,…
- Hibernate Criterion 在查詢方法設計上能夠靈活的依據Criteria的特點來方便地進行查詢條件的組裝.Hibernate設計了CriteriaSpecification作為Criteria的父接口,以下提供了Criteria和DetachedCriteria.Criteria和DetachedCriteria的主要差別在于創建的形式不一樣,Criteria是在線的,所…