v-if 判断
根据data里的数据判断真假
<div id="box">
<p v-if="false">我是p标签</p> // false的时候p标签被删除 不显示
</div>
<script>
new Vue({
el: '#box',
})
</script>
可直接在v-if=' true / false ' 也可以在data里面控制
<div id="box">
<p v-if="name">我是p标签</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:false
}
})
</script>
也可以用判断
<div id="box">
<p v-if="name === '1'">我是p标签</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'2'
}
})
</script>
v-else-if 相当于 else if(){}
<div id="box">
<p v-if="name === '1'">我是p标签</p>
<p v-else-if="name === '2'">我是2p标签</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'2'
}
})
</script>
v-else 相当于 else{}
<div id="box">
<p v-if="name === '1'">我是p标签</p>
<p v-else-if="name === '2'">我是2p标签</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标签</p>
<p v-else-if="name === '2'">我是2p标签</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有复用的机制，当检测到2个标签一样时会用原来渲染好的标签，这样可以节省重新渲染，节省性能-->
</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>
如果要让上面不出现这样 用到
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一个标识符，告诉vue2个不是同一个input vue就不会拿上面的标签了会渲染当前的-->
</p>
<p v-else>我什么都不是</p>
</div>
<script>
new Vue({
el: '#box',
data:{
name:'2'
}
})
</script>
v-on 绑定事件
语法：v-on:click="fn" 简写 @click='fn'
methods:（方法）存放所有事件函数
<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',
/*这个对象用来写各种各样的事件函数 放在这里面*/
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（参数）-->
<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('明天您好')}}
<!--|无论前面什么值右边都会执行 inp的值会传到fn里面 通过实参传给下面的函数
如果要传其他参数 fn('自定义数据')
下面 接收是第二个形参 第一个为inp的参数
-->
<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: ''
},
/* 实时计算 当数据改变时执行
* 上面用这个fn时不用（）
* 如果加（）会报错 所以不能进行传参
* */
computed: {
fn( b ){
console.log( b )
return '总价格'+this.txt1 * this.txt2;
}
},
/* 这种方式上面要加（）才可以执行 */
methods: {
fn1(){
return '总价格'+this.txt1 * this.txt2;
}
}
})
</script>
v-for 循环 相当于 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代表数组里的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代表数组里的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>
网友评论