精华内容
下载资源
问答
  • v-if不生效
    千次阅读
    2021-05-25 17:55:47
    <template>
        <van-button round type="info" @click="switchFun">
            <p class="" v-show="switchStatusNew">客源</p>
            <p v-show="!switchStatusNew">房源</p>
        </van-button>
    </template>
    
    <script>
     data() {
        return {
          // 客源,房源切换
          switchStatusNew: true,
        };
      },
      created() {
        this.switchStatusNew = this.$store.state.switchStatus;
      },
    </script>

    判断Vuex传递过来的值的类型是否为Boolean。

    console.log(typeof this.switchStatusNew);

    如果不是Boolean,v-if是不会响应的。

     

    更多相关内容
  • 主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • v-if 不生效----vue深入式响应原理

    千次阅读 2021-03-15 18:09:06
    想通过v-if 判断行内是否是编辑状态,来展示是input输入,还是普通显示文本,初始化默认的scope.row.ipshow1=true,点击编辑按钮,想通过@click='scope.row.ipshow1===false',来改变状态,重新渲染列表实现行内编辑,...

    今天在写的一个行内编辑功能,想通过v-if 判断行内是否是编辑状态,来展示是input输入,还是普通显示文本,初始化默认的scope.row.ipshow1=true,点击编辑按钮,想通过@click='scope.row.ipshow1===false',来改变状态,重新渲染列表实现行内编辑,然后并不能达到预期效果.

    通过多次百度,查到了关于深入响应式原理(附上官方文档https://cn.vuejs.org/v2/guide/reactivity.html),一句话总结:由于javascript 的显示,Vue 不能检测数组和对象的变化,了解了这个原理之后,我的代码做了如下修改,最终实现了行内编辑的效果(官方文档讲的特别清楚,大家一看就明白):

    展开全文
  • 项目中需要按照不同的媒体...可以增加不同key值解决v-if不生效问题。 <el-table-column prop="author" align="center" :key="Math.random()" v-if="pathIndex == '微博' || pathIndex == '微信'" sortable="c.

     项目中需要按照不同的媒体类型,展示不同的表头且数据字段也不同。可以增加不同key值解决v-if不生效问题。

    <el-table-column prop="author"
                      align="center"
                      :key="Math.random()"
                      v-if="pathIndex == '微博' || pathIndex == '微信'"
                      sortable="custom"
                      label="帐号名称">
    </el-table-column>
    <el-table-column prop="sitename"
                      align="center"
                      :key="Math.random()"
                      min-width="112"
                      v-if="pathIndex == '网络新闻'|| pathIndex == '头条'|| pathIndex == '电子报'"
                      sortable="custom"
                      label="媒体名称">
      <template slot-scope="scope">
        <p class="G_table_hidden_ellipsis"
            :title="scope.row.sitename">{{scope.row.sitename}}</p>
      </template>
    </el-table-column>

     

    展开全文
  • vue v-if生效问题

    千次阅读 2021-08-25 09:14:26
    事实证明,v-if本身是没有什么问题的,问题出在对应的变量身上。

    事实证明,v-if本身是没有什么问题的,问题出在对应的变量身上。

    前不久我使用VUE开发时遇到一个问题,好像v-if不起作用。什么意思呢,v-if是一个条件表达式,当且仅当条件满足时才触发,但在我的程序中,它好像有时条件明明不满足,也会被触发。

    这就很麻烦了。难道是VUE这个破烂不行?

    事实上,VUE是没啥问题的,是我不行。

    代码如图
    在这里插入图片描述
    问题其实出在"edit"这个变量里。如果将edit换成“true/false”,就一点问题没有,运行结果毫不含糊。但换成变量就不一定了。原因是,我这些代码放在iView的一个模式对话框modal里,而modal的所谓关闭,其实只是隐藏,并没有从内存中去掉。当再次打开时,edit还是上一次展现时用的值,但我没有意识到,总认为对话框重新出现时,上面的变量一定是新的。我的思维,还停留在原始的网页开发上。众所周知,http协议是无状态的,网页关闭、打开,所有的信息都是重新初始化过的。而现在vue等开发平台,默认是单页系统,只有一个页面,所有东西在上面,基本都是动态加载,一旦加载,默认又会缓存下来。

    这样做好许多好处,节省资源,速度快,用户体验好。缺点,似乎是开发的复杂度增加了。


    2021.11.23

    v-if 与 v-show 的区别:二者都对应条件,当条件不满足时,v-if不加载,v-show加载但不显示。

    在运行过程中,v-if的条件切换,由不满足到满足时,v-if对应组件加载。但这有个过程。期间组件不一定能访问。因此,需要将组件访问语句放在this.$nextTick里,以免报错。

    <!-- 当edit为真,加载Editor组件,否则加载Report组件 -->
    <Report ref="report1" v-if="!edit" />
    <Editor ref="editor1" v-if="edit" />
    
    checkOver () { // 校核归来
      this.edit = false
      let _this = this
      this.$nextTick(() => {
        _this.$refs.report1.init(_this.id)
      })
    },
    
    展开全文
  • 使用v-if v-else发现没有执行 最近在学习Vue,因为刚开始学习,所以总会遇到这样那样的问题,今天要说的一个错误就是在看Vue的官方文档的时候,发现在使用v-ifv-else指令的时候,相应的内容都出现了 初始代码: ...
  • 问题描述:两个页面中复用一个组件中的表格,但是不同时使用type="selection"属性,于是使用v-if判断显隐,但是没有生效还导致表格每列字段错乱问题。 解决方案如下: ①、v-if判断显隐 ②、el-table的key属性是它...
  • 今天晚上,我在某个组件里看到了这样一段代码...template v-if="false"> <div>Foo</div> </template> // Parent.vue <template> <Child /> </template> 按理来说,这里...
  • 在vue中,例如使用 `el-table-colnum` 组件中使用 `v-if` 或 `v-show` 作 **行内编辑** ,按一次生效,在按按钮 取消 或者 提交时,输入框隐藏, `v-if` 或 `v-show` 不生效
  • 当时我感觉频繁操作建议让他改成v-show,结果发现没生效,主要是因为table中的td,diplay:table-cell,权限高于display:none,导致v-show失效。 后面只能改成v-if,考虑到dom操作过程中,无法识别相同dom标签,导致...
  • 今天在开发过程中, 用的是根据方法名称调用方法, 来控制一个页面中某些部分的显示和隐藏.最后发现在调用方法时, 修改data中的值, 例如下图所示来控制是否显示的时候, ...div v-if="visible" style="height: 500px;">
  • v-if不起作用

    千次阅读 2022-03-27 17:05:04
    本周在写项目的时候发现使用v-if与el-radio一起使用,并起作用,在此记录(vue项目)下面代码引入的element-ui 需求: 点击按钮A,隐藏A内容,显示B 错误代码: <template> <el-radio v-model="radio" ...
  • 在 vue 3.x 中, v-if 总是优先于 v-for 生效。 对比学习 接下来我们通过一个简单的示例来感知下,假设我们想要实现一个极简的 todoList 效果: 我们有一个 todoList: const todoList = [ { id: 0, task: '...
  • 记录关于通过v-if渲染的element-ui表单,校验规则不生效的问题 代码 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label=...
  • el-form遇上v-if,表单校验不生效问题
  • 本文关于v-show与v-if的区别,以及在uni-app小程序中v-show失效问题如何解决等在本文中均有描述,希望对你有所帮助
  • vue使用el-table在el-table-column下使用v-if改变数据响应 代码: <el-table :data="propertyList" class="hoo-clear-table" height="100%" ref="tableRef" style="width: 100%"> <el-table-...
  • vue v-if transition起作用

    千次阅读 2020-10-29 15:49:58
    条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 自定义过渡动画的,记得在css中修改以下的类名: 动画名-enter 进入前效果 动画名-enter-active 进入的过渡时间和函数 动画名-enter-to 进入后...
  • 今天在项目中遇到一个问题,需要v-if渲染的 el-form-item组件使用prop设置规则校验时不生效: 如图,请求链接仅在http协议类型下才有,所以必须使用v-if做条件渲染,但是导致了上述请求链接空时,规则校验未生效。 ...
  • 如果v-ifv-for在一个标签里同时使用,那么会报错; 理解:v-for 的优先级比 v-if 的高,如果灭一次都要遍历整个数组,将会影响速度,特别是当需要渲染小部分的时候;如果一起用,会把 v-if 给灭一个元素都添加...
  • 在vue中,控制显示隐藏的有两个指令:v-ifv-show。 【1】两者不同点:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐; 【2】原理:v-if切换有一个局部编译/卸载的...
  • vue中v-ifv-else同时生效

    千次阅读 2020-11-02 17:53:24
    产生问题:下面代码v-ifv-else同时生效两个 <el-table-column label='身份证' width='200'> <template slot-scope='scope'> <span prop='card' v-if='scope.row.OBJECTID' @click="openNewPage...
  • 在mounted中使用jQuery给v-if赋值,但是起作用主要原因是全局this能直接在jQuery中使用应先在jQuery外面定义一个变量如_that = this方能使用 如: mounted(){ var _this=this; $('p').mouseover(function (){ ...
  • 一开始这样写v-if没有反应,然后找到原因是slot-scope这个属性,加上的话v-if不起作用,加的话数据报错取到值,百度查之后发现template里面`slot-scope跟v-if好像能同时使用,然后换格式 外面包div判断,可以...
  • el-table使用v-if显示错乱问题

    千次阅读 2022-03-25 10:49:35
    el-table使用v-if显示错乱问题
  • if (exist.length > 1) { this.$notify.error(this.l("itemTypeExist", selectItem.code)); rowData.itemType = null; rowData.itemTypeName = ""; } else { rowData.itemType = selectItem.dictValue; rowData....
  • VUE v-if不起作用

    万次阅读 2018-10-15 14:22:00
    &lt;div id="projEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="...projEdit v-if="showEdit" :data="data"&
  • vue v-ifv-else无效果

    千次阅读 2020-11-20 10:48:17
    可以看到,这样写的时候,v-ifv-else标签内容都被渲染出来了,很明显这符合我们的业务逻辑。 解决办法如下: 渲染效果 可以发现,我们把p标签和h3标签的位置换一下,就可以了。 原因分析: p标签是行内...
  • 那就一股脑用v-if根据类型去显隐,这时候发现在切换类型之后,有的表单项规则校验不生效了, 就纳闷了。 然后猜测是不是因为用了v-if,dom重新渲染导致表单的prop规则校验重新触发。去掉v-if后,果然可以了。 ...
  • 标题Vue和uniapp中v-if绑定数组中的布尔值没有效果 1、实际场景 (1)js代码里 data(){ list:[true,false] } (2)页面中 <div> <div v-if='list[0]'>我应该显示<div> <div v-if='list[1]'>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 96,898
精华内容 38,759
关键字:

v-if不生效