VUE框架使用v-if实现条件渲染代替watch监视属性实现动态变化------VUE框架

已于 2023-11-30 12:33:21 修改
阅读量966 收藏 20
点赞数 23
分类专栏： # VUE框架 前端 文章标签： vue.js 前端 javascript 前端框架 ecmascript vue js
于 2023-11-29 15:15:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134690892
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 这是压根就没有渲染,不是css隐藏 -->
        <button @click="addValue()">按下修改图片</button>
        <h1>{{value}}</h1>
        <img v-if="value % 2 === 0" height="100px" src="../Pic/1.png">
        <!-- 为了提高效率,可以使用v-else -->
        <!-- <img v-if="value % 2 != 0" height="100px" src="../Pic/2.png"> -->
        <!-- 这样效率高的多,不用再次运算一遍了 -->
        <img v-else height="100px" src="../Pic/2.png">
        <br>
        <input type="number" v-model="temp"/>
        <h1>{{warn}}</h1>
        <br>
        <h1 v-if="temp <= 10">寒冷</h1>
        <h1 v-if="temp > 10 && temp <= 25">凉爽</h1>
        <h1 v-if="temp > 25">炎热</h1>
        <!-- 简写方法,但是这样写,中间不能断开 -->
        <h1 v-if="temp <= 10">寒冷</h1>
        <h1 v-else-if="temp <= 25">凉爽</h1>
        <h1 v-else>炎热</h1>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                value : 1,
                temp : 0,
                warn : ""
            },
            methods : {
                addValue()
                {
                    this.value++;
                }
            },
            watch : {
                temp : {
                    immediate : true,
                    deep : true,
                    handler(newValue,oldValue)
                    {
                        if(newValue <= 10)
                        {
                            this.warn = "寒冷";
                        }
                        else if(newValue <= 25 && newValue > 10)
                        {
                            this.warn = "凉爽";
                        }
                        else if(newValue > 25)
                        {
                            this.warn = "炎热";
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <h1>{{msg}}</h1>

        <!-- 这是压根就没有渲染,不是css隐藏 -->

        <button @click="addValue()">按下修改图片</button>

        <h1>{{value}}</h1>

        <img v-if="value % 2 === 0" height="100px" src="../Pic/1.png">

        <!-- 为了提高效率,可以使用v-else -->

        <!-- <img v-if="value % 2 != 0" height="100px" src="../Pic/2.png"> -->

        <!-- 这样效率高的多,不用再次运算一遍了 -->

        <img v-else height="100px" src="../Pic/2.png">

        <br>

        <input type="number" v-model="temp"/>

        <h1>{{warn}}</h1>

        <br>

        <h1 v-if="temp <= 10">寒冷</h1>

        <h1 v-if="temp > 10 && temp <= 25">凉爽</h1>

        <h1 v-if="temp > 25">炎热</h1>

        <!-- 简写方法,但是这样写,中间不能断开 -->

        <h1 v-if="temp <= 10">寒冷</h1>

        <h1 v-else-if="temp <= 25">凉爽</h1>

        <h1 v-else>炎热</h1>

    </div>

    <script>

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                value : 1,

                temp : 0,

                warn : ""

            },

            methods : {

                addValue()

                {

                    this.value++;

                }

            },

            watch : {

                temp : {

                    immediate : true,

                    deep : true,

                    handler(newValue,oldValue)

                    {

                        if(newValue <= 10)

                        {

                            this.warn = "寒冷";

                        }

                        else if(newValue <= 25 && newValue > 10)

                        {

                            this.warn = "凉爽";

                        }

                        else if(newValue > 25)

                        {

                            this.warn = "炎热";

                        }

                    }

                }

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 23
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-if 未跟随异步数据获取而实时更新
l1002670137的博客
02-14 585
vue无法跟随动态数据实时更新问题
必背的小技巧让你轻松过关
links_577073699的博客
04-24 1110
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、生命周期1.1 什么是生命周期函数1.2 生命周期函数有哪些1.3 项目开发中 在生命周期里都做过什么功能1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?二、vuex 的理解三、 vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解 一、生命周期 1.1 什么是生命周期函数 - 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发 1.2 生命周期函数有哪些 创建阶段（4个） beforeCr.
vue里v-if实现动态组件导致watch重复调用问题
weixin_44961798的博客
07-14 1202
写在前面 出现类似问题的原因 使用了keep-alive 组件未使用key , 之前使用angularjs也遇到了这个问题 使用的脚手架封装了watch，原理类似这里 问题解决 仅针对第三种情况做解答 问题在于封装了watch，所以vue可能不能Destroy 方法1: 主动销毁即可，代码如下 created() { const unWatch = this.watchUpdate(() => { this.fetchList(); }); this.unW
【bug记录】vue中如何解决watch监听数据后props根据v-if动态判断并挂载DOM的问题
最新发布
x781054643的博客
06-28 299
接口返回的数据：enterpriseData。我们需要用v-if判断空数据时，展示空页面；接口数据处理过的数据：LineData。
Vue v-if 动态切换失效，不随函数值变化进行切换
loney_wolf的博客
10-31 2151
v-if 初始化之后，table并没有随着 appearLeader，appearNormal的值变化而进行变化。在v-if 后在绑定一个key ,完美解决 :key=‘normal’ :key=‘leader’网友给出的原因，可能是Vue识别到是相似组件（高度相似甚至相同）不会更新元素。给俩个高度相似的组件分别加上不同的key值让Vue识别为不同的组件。
web前端VUE框架-基础知识及核心原理
01-27
Vue 还提供了多种指令，如 `v-model` 用于双向数据绑定，`v-if` 和 `v-show` 控制条件渲染，`v-for` 进行循环，以及 `v-once` 只渲染元素和组件一次。 Vue 还支持自定义指令，通过 `Vue.directive()` 注册。这些...
vue.js vue-router如何实现无效路由(404)的友好提示
11-27
在`App.vue`中，我们可以使用`watch`对象来监视`$route`的变化。一旦检测到路由变化，我们可以检查`$route.matched`数组，这个数组包含了当前路由匹配的所有信息。如果`$route.matched`为空或长度为0，那就意味着...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
在vue-admin-template中，学习如何配置路由，使用动态路由匹配和命名视图。 5. **axios**：常用于Vue项目的HTTP客户端，处理前后端数据交互。了解如何发起GET、POST请求，处理响应，以及错误处理。 6. **Element ...
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解
11-27
使用vue-cli，可以轻松创建新项目、预设配置、运行开发服务器、打包生产环境等。例如，安装vue-cli后，可以通过以下命令创建新项目： ```bash vue create my-project ``` 在创建的项目中，Vue组件是构成应用程序的...
vue组件中watch props根据v-if动态判断并挂载DOM的问题
10-17
主要介绍了vue组件中watch props根据v-if动态判断并挂载DOM的问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
watch和computed v-if和v-show 生命周期函数(这些很是重要)
HANGSOME123的博客
04-22 1754
3.1 computed特性 1.是计算值， 2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值 3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数 3.2 watch特性 1.是观察的动作， 2.应用：监听props，$emit或本组件的值执行异步操作 3.无缓存性，页面重新渲染时值不...
调接口渲染的时候 v-if第一次没问题第二次渲染走watch ,数据长度已经存在导致走watch
csstmg的博客
11-19 362
组件渲染的时候 当获取新数据以后 会走组件的mounted–不会走watch 当有数据存在的时候–会走watch 清空数据–让v-if重新渲染 $set 数组 data:{ arr1 = ['a','b', 'c'] arr2 = ['f,''g','h'] vm.$set(vm.arr2,1,'al') } es5 const arr1 = [1,2,3,4,5], arr2 = [5,6,7,8,9]; // 交集 let intersection = a..
vue中watch的详细用法以及更改数据视图是否更新(四种)
AmagCuixiaobo的博客
04-28 6238
在Vue中，用watch来响应数据的变化。 1.监听某一数据的变化 2.监听对象或者数组的变化 3.监听对象或者数组某一属性的变化 4.监听路由的变化 一.监听某一数据的变化 <input type="text" v-model="userName"/> //当userName值发生变化时触发 watch: { userName (newName, oldName) { c......
[Vue] | 修改data中的值 v-if 不能动态切换, v-if失效
张音乐的博客
07-08 7693
今天在开发过程中, 用的是根据方法名称调用方法, 来控制一个页面中某些部分的显示和隐藏.最后发现在调用方法时, 修改data中的值, 例如下图所示来控制是否显示的时候, 修改后不能动态控制是否显示,最后经过一番排查, 发现,动态调用的时候需要把当前的this传入方法中执行. 如果你也是使用的动态调用, 那就需要注意喽. <template> <div> <div v-if="visible" style="height: 500px;">
【Vue】Vue中常用的基础指令与使用
一只洒鹿
05-16 1356
Vue.js的指令 1.内部指令 指令是特殊的带有前缀 v-的特性。指令的值限定为绑定表达式，指令的职责就是当表达式的值改变时把某些特殊的行为应用到DOM上。 基础指令： v-show v-else v-model v-repeat[1.0-] v-for[1.0+] v-text v-el v-html v-on v-bind v-ref v-pre v-cloak v-if （1） v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，.
Vue v-show/v-if绑定的数据改变时，无法监听数据变化
Yuval的博客
02-15 1万+
原因：向对象中新增属性时，Vue无法监听新增的属性的数据变化，从而无法触发视图的改变   解决：使用 Vue.set() 来新增属性 Vue.set( target, key, value ) 参数： {Object | Array} target {string | number} key {any} value 返回值：设置的值。 ...
关于VUE2.0中v-if使用数组内的条件动态判断无法生效判断
热门推荐
前端小口袋
08-14 1万+
在使用v-if控制元素显示隐藏时候，如果判断条件是数组中的元素，再一开始页面渲染显示正常，可以用数组内的变量来控制v-if元素，但是以后通过方法直接改变数组内变量却不能影响v-if控制的元素显示隐藏。 你可以使用 this.selectList.push("564"); this.selectList.pop(); 先往数组增加一个元素，再删除，这样再改变数组内变量 v-if就可以被影响。 ...
vue判断组件是否显示_vue组件中watch props根据v-if动态判断并挂载DOM的问题
weixin_39870238的博客
12-29 2093
问题复现：父组件中通过名为 source 的 prop 向子组件 chart 传入数据import chart from '../components/chart'export default {name: 'home',components: { chart },data () {return {chartdata: []}},mounted () {settimeout(() => {t...
vue对象属性变化时无法刷新v-if、v-show
guanguan0_0的博客
02-15 9505
普通对象赋值方式可能会使v-if和v-show无法刷新，可以使用this.$set(this.obj, 属性名,属性值)的方式来改变对象的值，例子如下： <template> <button @click="handleShow">点击</button> <div v-if="params.isShow">显示出来div<...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值