码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 条件渲染

时间:2018-08-16 20:02:26      阅读:45      评论:0      收藏:0      [点我收藏+]

标签:标签   方法   methods   rop   port   输入   efault   其他   if else   

vue 条件渲染,v-if ,v-show;这两个的值是true时候,dom中的元素都会渲染出来,当值为false的时候,if渲染的元素不会在dom中出现,show渲染的dom元素是style:display:none;两者有这样的区别,同时v-if else 两者使用的时候中间不能有其他的元素,否则会失效,例如在两个div中,一个div是v-if,另一个是else,在这两个div中都有input标签,当input标签发生change实际的时候,v-if的值由false变成true,如下面的例子:在这里邮箱显示的,当发生chang事件时候即方法hanleFinish执行,改变show的值,这里input必须加key值,值可以自定义,不然在邮箱里输入的值会在用户名的input上显示出来。

<div v-if="show">
用户名: <input type="text" key="one">
</div>
<div v-else>
邮箱名: <input type="text" @change="hanleFinish" key="two">
</div>

<script>
export default {
props: [‘list‘],
data ()
{
return {
show:false,
},
methods: {
hanleFinish(){
this.show = true;
}
}, }
</script>

Vue 条件渲染

标签:标签   方法   methods   rop   port   输入   efault   其他   if else   

原文地址:https://www.cnblogs.com/zhx119/p/9488569.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!