a标签 vue 动态点击_vue基础那点事
vue-day01
1.vue的介紹
作者介紹 框架的介紹
2.vue官網
https://cn.vuejs.org/
3.vue的優點
易用，靈活，高效
4.庫與框架區別
庫：只具有某一種功能
框架：具備完整的功能 ? bootstrap ? element-ui
5.開發環境與生產環境
開發環境地址:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>生產環境地址:<script src="https://cdn.jsdelivr.net/npm/vue">script>6.vue特點
數據驅動 ?組件化 ? 單頁面應用
7.vue中指令(text)
v-text:與原生的innerText一致，只識別字符串
v-html:與原生的innerHTML一致，可以識別標簽
8.vue中指令與插值的使用
插值表達式后面的內容會展示
通過指令綁定元素之間的內容不會顯示
9.vue中指令(if)
v-if ?v-else-if ? v-else ? ?如果......否則......
10.vue中的指令(show)
兩者區別:
1.v-if是動態的向dom樹中添加、刪除元素
?v-show通過設置css樣式來實現
2.v-if是真實創建其具有惰性，如果初始值是false則不會渲染,同時也不會被緩存
?v-show:無論初始值是否真假都會先渲染
總結:如果需要頻繁切換需要用v-show
11.vue中的方法使用(v-on)
let vm = new Vue({ ? ? el:'#app', ? ? data:{ ? ? ? ? name:'宏超' ? ? }, ? ?// 所有的方法存放在methods中 ? ? methods: { ? ? ? ? say(name){ ? ? ? ? ? alert('hi,'+name) ? ? ? ? }, ? ? ? ? say2(){ ? ? ? ? ? ? console.log(this) ? ? ? ? ? ?console.log('hi,'+this.name) ? ? ? ? } ? ? }, })直接使用 {{say2()}} 調用<body> ? ?<div id="app"> ? ? ? ? ? ?<div @click = 'alertName'>點擊實現效果div> ? ? ? ? ? ?<div @click = 'alertName2("褚陽森")'>點擊實現效果div> ? ? ? ? ? ?<div @click = 'num++'>點擊實現效果div> ? ? ? ? ? {{num}} ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el:'#app', ? ? ? ?data:{ ? ? ? ? ? ?name:'志寶', ? ? ? ? ? ?num:0 ? ? ? }, ? ? ? ?methods: { ? ? ? ? ? ?alertName(){ ? ? ? ? ? ? ? ?alert(this.name) ? ? ? ? ? }, ? ? ? ? ? ?alertName2(name){ ? ? ? ? ? ? ? ?alert(name) ? ? ? ? ? } ? ? ? }, ? })script>注意：v-on:click='方法名' ? ?可以簡寫為:@click='方法名'
? ? ? ?1.綁定事件的另種方式：a.直接寫方法名 ? b.直接寫表達式(一般常用簡單的表達式)
12.v-for(數組)
<body> ? ?<div id="app"> ? ? ? ?<span v-for='item in arr'>{{item}}span> ? ? ? ?<p v-for='(item,index) in arr'>{{index}}-----{{item}}p> ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el:'#app', ? ? ? ?data:{ ? ? ? ? ? arr:['蘋果','香蕉','橘子','榴蓮'] ? ? ? }, ? ? ? ?methods: { ? ? ? ? ? ? ? ? }, ? })script>注意點: ? v-for ?循環數組可以傳遞2個參數，第一個是數組的每一項，第二個是數組的索引
13.v-for(對象)
<body> ? ?<div id="app"> ? ? ? ?<span v-for='item in objs'>{{item}}span> ? ? ? ?<p v-for='(value,key,index) in objs'>{{key}}-----{{value}}-------{{index}}p> ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el:'#app', ? ? ? ?data:{ ? ? ? ? ?objs:{ ? ? ? ? ? ? ?'水果':'蘋果，香蕉，橘子', ? ? ? ? ? ? ?'蔬菜':'小白菜，土豆，芹菜' ? ? ? ? } ? ? ? }, ? ? ? ?methods: { ? ? ? ? ? ? ? ? }, ? })script>注意：循環對象的時候，傳遞三個參數，分別代表value，key,index 位置不可以更換
14.v-bind綁定屬性
<body> ? ?<div id="app"> ? ? ? ? ? ? ? ?<a v-bind:href="href" v-bind:title="title" v-bind:msg='msg'>點擊跳轉a> ? ? ? ?<a :href="href" :title="title" ?:msg='msg'>點擊跳轉a> ? ? ? ? ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el: '#app', ? ? ? ?data: { ? ? ? ? ? ?href:'https://www.baidu.com', ? ? ? ? ? ?title:'我是標題1111', ? ? ? ? ? ?msg:'hello' ? ? ? }, ? ? ? ?methods: { ? ? ? }, ? })script>注意：v-bind: 可以簡寫為 ?:title:'abc'
15.動態綁定樣式class
<body> ? ?<div id="app"> ? ? ? ? ? ? ?<div class="box">我是普通樣式渲染div> ? ? ? ? ? ?<div :class="className">我是第一種樣式渲染div> ? ? ? ? ? ?<div :class="objClass">我是第二種樣式渲染div> ? ? ? ? ? ?<div :class="[1==1?'blue':'yellow']">我是第三種樣式渲染div> ? ? ? ? ? ?<div :class='"yellow " + font'>我是第四種樣式渲染div> ? ? ?<div :class='"yellow " + "font"'>我是第四種樣式渲染div> ? ? ? ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el: '#app', ? ? ? ?data: { ? ? ? ? ? className:'pink', ? ? ? ? ? objClass:{ ? ? ? ? ? ? ? ?'orange':true, ? ? ? ? ? ? ? ?'font':true, ? ? ? ? ? }, ? ? ? ? ? font:'font' ? ? ? }, ? ? ? ?methods: { ? ? ? ? ? ? ? ? }, ? })script>注意：普通情況用第一種和普通綁定即可，如果后期需要動態添加那么就需要用到第四種
15.動態綁定style
我是通過style來設置的我是第二種通過style綁定我是第三種通過style綁定注意：如果需要綁定多個樣式，需要用對象的方式，如果需要綁定多個類名，需要用數組的方式
-----------------------------------這是分割線--------------------------------
簡單選項卡操作：
DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Documenttitle>
????<style>
????????.title?{
????????????width:?100px;
????????????height:?30px;???
????????????border:?1px?solid?#000;
????????????float:?left;
????????}
????????.clear{
????????????clear:?both;
????????}
????????.box?{
????????????width:?304px;
????????????height:?100px;
????????????border:?1px?solid?#bfc;
????????????font-size:?30px;
????????????text-align:?center;???????????
????????}
????????.pink{
????????????color:?pink;????????????
????????}
????????.green{
????????????color:?green;????????
????????}
????????.red{
????????????color:?red;????????????
????????}
????style>
head>
<body>
????<div?id="app">
????????<div?:class="[title,item.color]"??@click?=?"isShow(index)"??v-for="(item,index)?in?list">{{item.tag}}div>
????????<div?class="clear">div>
????????<div?:class='"box?"?+item.color?'?v-if?=?"item.show"?v-for?=?"(item,index)?in?list">{{item.content}}div>
????div>
body>
<script?src="../vue.js">script>
<script>
????let?vm?=?new?Vue({
????????el:?"#app",
????????data:{
????????????title:"title",
????????????list:[
????????????????{tag:"選項卡一",content:"內容一",show:true,color:"pink"},
????????????????{tag:"選項卡二",content:"內容二",show:false,color:"green"},
????????????????{tag:"選項卡三",content:"內容三",show:false,color:"red"}
????????????]
????????},
????????methods:{
????????????isShow(index){
????????????????for(let?i?=?0;i<this.list.length;i++){
????????????????????this.list[i].show?=?false;
????????????????}
????????????????this.list[index].show?=?true;
????????????}
????????}
????})
script>
html>
總結
以上是生活随笔為你收集整理的a标签 vue 动态点击_vue基础那点事的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 轩逸车联网功能怎么用_北斗已建设完成，那
- 下一篇： 4阶范德蒙德行列式例题_行列式的性质和计