精华内容
下载资源
问答
  • 计数器有最小值与最大的限制,且中间的文本输入框可自己输入。 实现方式是在watch中监听文本输入框绑定的v-model,跟最大最小值比较后,如果有需要,则改变。 <mu-text-field v-model.number="weightNum" ...

    在这里插入图片描述

    计数器有最小值与最大值的限制,且中间的文本输入框可自己输入值。
    实现方式是在watch中监听文本输入框绑定的v-model,跟最大最小值比较后,如果有需要,则改变值。

    <mu-text-field v-model.number="weightNum" solo full-width ></mu-text-field>
    
    watch: {
                //监听用户输入的重量值
                //如果超过最大重量,弹出提示,并且将输入框重量置于最大值
                //如果低于最小重量,弹出提示,并且将输入框重量置于最小值
                weightNum(val){
                    if(val<this.weightLimit.minWeight){
                        this.$toast.showWarn({message: 'You can only enter between ' +this.weightLimit.minWeight+ ' and ' +this.weightLimit.maxWeight});
                        this.$data.weightNum = this.weightLimit.minWeight;
                    }
                    else if(val>this.weightLimit.maxWeight){
                        this.$toast.showWarn({message: 'You can only enter between ' +this.weightLimit.minWeight+ ' and ' +this.weightLimit.maxWeight});
                        this.$data.weightNum = this.weightLimit.maxWeight;
                    }
                }
            
            },
    

    核心:

    this.$data.weightNum = this.weightLimit.minWeight;
    

    这里如果直接this.weightNum = this.weightLimit.minWeight;是没有用的。

    Vue_watch()方法,检测数据的改变。

     <script type="text/javascript">
                var vm = new Vue({
                    el: app01,
                    data:{
                        a:'test',
                    }
                })
                // 检测数据'a'的改变,放数据改变时执行
                vm.$watch('a', function(newval, oldval){
                    console.log(newval, oldval);
                })
                vm.$data.a = 'wdc'
            </script>
    

    参考文档:https://www.cnblogs.com/wangdianchao/p/13211129.html

    展开全文
  • <p>怎么把true/falseg改为是否显示1时候<img alt="" height="519" src="https://img-ask.csdnimg.cn/upload/1622538810051.png" width="1072" /><img alt="" height="327" src=...
  • vue 判断数组是否为空

    千次阅读 2019-10-07 21:22:01
    为空:array == undefined || array.length <= 0 (顺序不能调换) 不为空: array !==undefined && array.length > 0 转载于:https://www.cnblogs.com/-zrj/p/11528090.html

    为空:array == undefined || array.length <= 0 (顺序不能调换)

    不为空: array !==undefined && array.length > 0 

    转载于:https://www.cnblogs.com/-zrj/p/11528090.html

    展开全文
  • vue用if判断数据是否有

    万次阅读 2018-12-26 12:42:30
    如果循环中没有图片,则不显示 &lt;img :src="item.imgs" v-if="item.imgs"...p v-if="item.num &gt;0"&gt;{{item.num}}&lt;/p&gt;    ...

    如果循环中没有图片,则不显示

    <img :src="item.imgs" v-if="item.imgs">

     

    如果循环中数字为0或空,则不显示

    <p v-if="item.num >0">{{item.num}}</p>

     

     

    展开全文
  • vue(表格)

    2018-11-30 12:53:00
    vue(表格) <!DOCTYPE html> <html lang="zh-CN"> <head> <title>JSON取数测试</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...

    vue绑值(表格)

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
    <title>JSON取数测试</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        </head>
    
    <body>
    <div id="main">
        <table border=1>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>type</td>
                <td>location</td>
            </tr>
            <tr v-for="r in rows">
                <td>{{r.id}}</td>
                <td>{{r.name}}</td>
                <td>{{r.type}}</td>
                <td>{{r.location}}</td>
            </tr>
        </table>
    </div>
    </body>
    <script>
    $(document).ready(function () {
        //发起请求
        $.getJSON("json/vueceshi.json", function (result, status) {
            //绑值关键代码
            var v = new Vue({
                el: '#main',
                data: {
                    rows: result
                }
            })
        });
    });
    </script>
    
    </html>
    • json

        [
            {
                "id": 1,
                "name": "张三",
                "type": "省长",
                "location": "河北省"
            }, {
                "id": 2,
                "name": "李四",
                "type": "市长",
                "location": "北京市"
            }
        ]
    • 小插曲(渲染时的判断)

        <tr v-for="r in rows">
                            <td>
                            <input type="checkbox" value="1" name="">
                        </td>
                            <td style="display: none">
                                {{r.partnersId}}
                            </td>
                            <td>
                                {{r.partnersName}}
                            </td>
                            <td v-if="r.partnersType==1">
                                个人
                            </td>
                            <td v-else="r.partnersType==2">
                                机构
                            </td>
                            <td v-if="r.partnersStatus==1">
                                洽谈中
                            </td>
                            <td v-else="r.partnersStatus==2">
                                合作中
                            </td>
                            <td v-else="r.partnersStatus==3">
                                终止合作
                            </td>
                            <td>
                                {{r.partnersProprotion}}
                            </td>
                            <td>
                                {{r.partnersAddress}}
                            </td>
                            <td>
                                {{r.partnersMan}}
                            </td>
                            <td>
                                {{r.partnersContact}}
                            </td>
                            <td>
                                查看
                            </td>
                        </tr>

    转载于:https://www.cnblogs.com/renxiuxing/p/10043523.html

    展开全文
  • vue input 判断

    千次阅读 2018-11-30 16:00:00
    //输入框 判断 //全局异常提示信息 //b 1:失去焦点验证错误提示 2:得到焦点关闭错误提示 //i 来区分是验证那个input框 check:function (t,b) { var that =this; ...
  • //递归对象 ...var recursiveObject = Vue.extend({ name: 'recursive-object', template:[ '<ul>', '<li v-for="(key,val) in data">', '<div v-if="is_obj(val)">', ...
  • vue中如何组合键被按如果是功能键(ctrl,alt,shift)+字母复制代码 1 2 3 4 function (e) { if(e.key=="z" && e.ctrlKey==true){ } } 通过上面...
  • vue 正则判断

    千次阅读 2019-05-13 18:00:00
    value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.');if(value.indexOf('.')!...转载于:https://www.cnblogs.com/chen527/p/10858103.html
  • 作者:愣锤 ...如果你是vue大佬,请忽略小弟的愚见V查看打包后各文件的体积,帮你快速定位大文件路由懒加载(也叫延迟加载)开启gzip压缩代码详情页返回列表页缓存数据和浏览位置...
  • Vue的条件判断 v-if的基本使用: 有时候我们需要控制标签内容的显隐,在满足某些条件时,显示标签,某些时候又要隐藏标签,因此就可以引入v-if,为其设置一个boolean,以此来控制标签的显隐: 示例代码: <...
  • p>组织设置:</p> <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.partySetup=="3"?"更名":organInfo.partySetup }}</p> </div>
  • Vue 条件判断与循环

    2020-03-21 12:24:59
    一、条件判断 1.1、简单判断         在模板中,可以根据条件进行渲染。条件用到的是 v-if、v-else-if 、v-else 来组合实现的。 <!DOCTYPE html> <html lang="en"> <head>...
  • vue

    2021-01-07 19:18:56
    Vue.js 简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 (1)Vue是一个渐进式的框架,什么是渐进式的呢? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。 或者如果你希望将更多的...
  • 判断Vue.js 条件语句

    2020-07-14 17:02:41
    条件判断 v-if 条件判断使用 v-if 指令: <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术,更是...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...vue</title> <link rel="st...
  • vue计算属性做动态数据判断

    千次阅读 2019-07-31 21:11:37
    具体教程见vue官网 看到本篇文章,你可能就是不知道如何用vue计算属性 可能也看了上面的官网 和其他博客 可能看的自己一脸懵逼 下面本人展示俩案例 直接上... //判断是否为空 为空返回 [] ,不为空返回 this.list...
  • 前提环境:webpack (1)路由的配置在router下的index.js文件中配置路由及参数 本例以子路由为主:path:'/HelloWorld/engine/:id',name: 'engine',component:...export default new Router({ routes: [ { p...
  • vue 动态变量不变化

    千次阅读 2019-01-28 17:11:00
    caseData = { lists:[] }; vm = new Vue({ el: '.hs-mt', data: caseData }); function getlist(pid,id){  $.ajax({  url: 'xxxxxxxxxxxxxx',  type: 'post',  dataType: ...
  • vue全选反选获取

    2021-04-12 09:33:50
    p>cfvghbjnm</p> </template> <script> export default { data() { return { // 用户当前选择的数据 selectLists: [], }; }, methods: { // 获取点击的数据 clickTable(row) { let ...
  • vue中 key 的作用

    千次阅读 2019-04-01 22:55:49
    1 .index不是一定不变的,如果不加key的话,删除前面的项。后面的index可能变也可能不变,比如加个定时器的时候会变,不加定时器不会变 2 .不加key的话,更新机制的进行diff的时候是会全部比较的,比如删除第一...
  • 文章目录1. 事件处理、以及Vue生命周期函数、事件描述符1.1 基本用法1.2 获取事件对象,阻止默认行为、事件冒泡行为、事件描述符... DOM元素显示3.1 v-if判断 - 决定元素是否被渲染3.1.1 单if判断3.1.2 多if判断 - i...
  • vue基于elementUI表格状态判断展示

    千次阅读 2019-07-25 15:16:26
    判断一条数据的状态展示相应的内容方法 如:status(状态(-1:待处理,0:关闭,1:已反馈,2:未解决,3:已解决)), 通过 v-if 判断显示对应的状态 代码: <div style="padding:15px 20px;"> <el-table ...
  • vue中的判断语句 v-if v-else v-else-if v-if v-if 指令将根据表达式 seen 的(true 或 false )来决定是否插入 p 元素。 < div id=“app”> < p v-if=“seen”>现在你看到我了</ p> </ div>...
  • vue根据不同改变css样式

    千次阅读 2019-01-14 14:27:05
    原文:http://www.cnblogs.com/can-dy/p/7364760.html &lt;div class="rack" v-for = "(item,idx) in items" :key="idx" :class = "{rackA:item.num==1, rackB:item....
  • 3.Vue.js前端框架:条件判断与列表渲染

    千次阅读 热门讨论 2021-04-13 07:48:16
    Vue.js提供了多个指令来实现条件的判断,包括 v-if、v-else、v-else-if、v-show指令。下面分别进行介绍。 3.1.1 v-if指令 v-if 指令可以根据表达式的判断是否输出DOM元素及其包含的子元素。如果表达式的为 ...
  • 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next 。 to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子。 下面...
  • Vue 渲染 不同对应不同操作

    千次阅读 2017-01-18 19:22:58
    今天遇到一个问题就是,json传值传入-1,0,1三个,用来渲染不同的三个状态,用v-show只能做到两个,又不愿意用三个div,感觉很笨,然后翻遍百度以后,终于找到答案啦。 大神就是大神,这么轻描淡写就搞定了我抓...
  • Vue基础

    万次阅读 2020-11-04 16:54:30
    Vue入门 一、什么是vue? JavaScript的框架 框架是不同于向jQuery这样的js库,框架需要遵守它的规则,才能使用 二、vue的特点 JavaScript框架 简化Dom操作 响应式数据驱动 三、实现第一个vue程序 导入vue.js...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,799
精华内容 7,119
关键字:

pvue判断值

vue 订阅