v-if 判斷
根據(jù)data里的數(shù)據(jù)判斷真假
<div id="box">
<p v-if="false">我是p標(biāo)簽</p> // false的時候p標(biāo)簽被刪除 不顯示
</div>
<script>
new Vue({
el: '#box',
})
</script>
可直接在v-if=' true / false ' 也可以在data里面控制
<div id="box">
<p v-if="name">我是p標(biāo)簽</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:false
}
})
</script>
也可以用判斷
<div id="box">
<p v-if="name === '1'">我是p標(biāo)簽</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'2'
}
})
</script>
v-else-if 相當(dāng)于 else if(){}
<div id="box">
<p v-if="name === '1'">我是p標(biāo)簽</p>
<p v-else-if="name === '2'">我是2p標(biāo)簽</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'2'
}
})
</script>
v-else 相當(dāng)于 else{}
<div id="box">
<p v-if="name === '1'">我是p標(biāo)簽</p>
<p v-else-if="name === '2'">我是2p標(biāo)簽</p>
<p v-else>我什么都不是</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'3'
}
})
</script>
小案例
<div id="box">
<input type="text" v-model="name">
<p v-if="name === '1'">我是p標(biāo)簽</p>
<p v-else-if="name === '2'">我是2p標(biāo)簽</p>
<p v-else>我什么都不是</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'3'
}
})
</script>
<div id="box">
<input type="text" v-model="name">
<p v-if="name === '1'">
用戶名：<input type="text"> <!--vue有復(fù)用的機制耀盗，當(dāng)檢測到2個標(biāo)簽一樣時會用原來渲染好的標(biāo)簽趾代，這樣可以節(jié)省重新渲染泞遗，節(jié)省性能-->
</p>
<p v-else-if="name === '2'">
密碼：<input type="text">
</p>
<p v-else>我什么都不是</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'2'
}
})
</script>
如果要讓上面不出現(xiàn)這樣 用到
v-bind:key = ''
<div id="box">
<input type="text" v-model="name">
<p v-if="name === '1'">
用戶名：<input type="text" v-bind:key="1">
</p>
<p v-else-if="name === '2'">
密碼：<input type="text" v-bind:key="2"> <!--v-bind:key 就是給2個input一個標(biāo)識符学搜，告訴vue2個不是同一個input vue就不會拿上面的標(biāo)簽了會渲染當(dāng)前的-->
</p>
<p v-else>我什么都不是</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'2'
}
})
</script>
v-on 綁定事件
語法：v-on:click="fn" 簡寫 @click='fn'
methods:（方法）存放所有事件函數(shù)
<div id="box" v-on:click="fn">
我是div
</div>
<script>
new Vue({
el: '#box',
methods:{
fn: function ( ) {
alert( 0 );
}
}
})
</script>
image.png
<div id="box" @click="fn">
我是div
</div>
<script>
new Vue({
el: '#box',
/*這個對象用來寫各種各樣的事件函數(shù) 放在這里面*/
methods:{
fn(){ // es6寫法 只有在對象里面才能這樣寫
alert( 0 )
}
}
})
</script>
小案例
<div id="box" >
<p @click="fn">點擊我切換</p>
<div v-if="change"> 我是第一個div </div>
<div v=else> 我是第二個div </div>
</div>
<script>
new Vue({
el: '#box',
data: {
change: true
},
methods:{
fn(){
this.change = !this.change;
}
}
})
</script>
v-show 顯示隱藏 控制display: block none
<div id="box" >
<p @click="fn">點擊我切換</p>
<div v-show="change"> 我是第一個div </div>
</div>
<script>
new Vue({
el: '#box',
data: {
change: true
},
methods:{
fn(){
this.change = !this.change;
}
}
})
</script>
<div id="box" >
<!--傳參 fn（參數(shù)）-->
<p @click="fn('abcd')">點擊我切換</p>
<div v-show="change"> 我是第一個div </div>
</div>
<script>
new Vue({
el: '#box',
data: {
change: true
},
methods:{
fn( a ){ // 形參接收
console.log( a )
this.change = !this.change;
}
}
})
</script>
filters過濾器
<div id="box">
{{inp|fn('明天您好')}}
<!--|無論前面什么值右邊都會執(zhí)行 inp的值會傳到fn里面 通過實參傳給下面的函數(shù)
如果要傳其他參數(shù) fn('自定義數(shù)據(jù)')
下面 接收是第二個形參 第一個為inp的參數(shù)
-->
<input type="text" v-model="inp" >
<div v-html="inp"></div>
</div>
<script>
new Vue({
el: '#box',
data:{
inp:''
},
methods:{},
// 過濾器 如果沒有return 沒有東西返回 就會全部過慮
filters:{
fn( val , zidingyi ){
let reg = /\D/;
console.log( reg.test(val) , zidingyi )
if( !reg.test(val) ){
console.log( 222 )
return '$'+val+'元';
}
},
}
})
</script>
computed 計算器
<div id="box">
<p>{{ num }}</p>
<p>{{ fn }}</p>
</div>
<script>
new Vue({
el: '#box',
data:{
num: '123'
},
computed: { // 實時計算
fn(){
return this.num = '456';
}
}
})
</script>
<script>
var box = new Vue({
el: '#box',
data:{
txt1: '',
txt2: ''
},
/* 實時計算 當(dāng)數(shù)據(jù)改變時執(zhí)行
* 上面用這個fn時不用（）
* 如果加（）會報錯 所以不能進行傳參
* */
computed: {
fn( b ){
console.log( b )
return '總價格'+this.txt1 * this.txt2;
}
},
/* 這種方式上面要加（）才可以執(zhí)行 */
methods: {
fn1(){
return '總價格'+this.txt1 * this.txt2;
}
}
})
</script>
v-for 循環(huán) 相當(dāng)于 for in
<div id="box">
<ul>
<li v-for="i in news">{{ i }}</li>
<!-- 跟for in一樣的 -->
</ul>
</div>
<script>
new Vue({
el: '#box',
data: {
news: ['今天是星期一','今天是星期二','今天是星期三','今天是星期四','今天是星期五',]
}
})
</script>
<div id="box">
<ul>
<li v-for="(i , index) in news">{{ i }}----{{ index }}</li>
<!--i代表數(shù)組里的1 2 3 4 5 index 代表是序號-->
</ul>
</div>
<script>
new Vue({
el: '#box',
data: {
news: ['今天是星期一','今天是星期二','今天是星期三','今天是星期四','今天是星期五',]
}
})
</script>
news里面是json時
<div id="box">
<ul>
<li v-for="(i , index) in news">{{ i.name }}----{{ index }}</li>
<!--i代表數(shù)組里的1 2 3 4 5 index 代表是序號-->
</ul>
</div>
<script>
new Vue({
el: '#box',
data: {
news: [{name: 1},{name: 2},{name: 3},{name: 4},{name: 5}]
}
})
</script>
<div id="box">
<ul>
<li v-for="(i , index) in fn()">{{ i }}</li>
</ul>
</div>
<script>
new Vue({
el: '#box',
data: {
news: [{name: 1},{name: 2},{name: 3},{name: 4},{name: 5}]
},
methods: {
fn(){
var arr = [];
for(var i = 0;i < 10; i++){
arr.push( i )
}
return arr;
}
}
})
</script>
