select 标签 未选择任何内容 在 vue.js 中使用遇到的坑

select 标签使用时,经常会遇到不进行任何的选择,即 value=‘’ 的情况

这时如果配合  vue.js 的 v-model 使用,会使得 v-model 标签失效,也就是说,v-model 标签配合 select 不能存在  <option value="" ></option>的情况

但是如果,我们必须有什么也不选择的选项的话,我们可以 <option value="%" >点击选择...</option>这样写,

这样使得页面显示的样式和   <option value="" ></option> 显示的样式一模一样(谷歌浏览器)

如果要保存这个数据,在前台提交时或后台做处理

有人说,我为什么一定要用 % 号呢,这时因为,如果我们这个下拉框,作为一个条件去查询时,后台我们拼接SQL的时候,把这个value拼接上

一般我们会写   =‘这个value’,现在我们写成  like ‘这个value‘,

这样当我们前端选择     点击选择...    这个选项,后台SQL拼接的效果为  like‘%‘,这样相当于忽略了这个条件,不用做非空校验处理,而且不耽误我们使用  like ‘1‘ 这种用法

这是我想到的最好的办法,我没有想到其他更好的办法,解决这个 value="" 的问题,如果有,留言告诉我,不胜感激

原文地址:https://www.cnblogs.com/ninetailfox/p/10840484.html

时间: 2024-11-10 00:03:33

select 标签 未选择任何内容 在 vue.js 中使用遇到的坑的相关文章

浅析Vue.js 中的条件渲染指令

1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div

vue.js 中使用(...)运算符报错的解决方法

vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSize' ]) }, 这个错误是在项目中,不识别es6的扩展运算符,解决办法(四步走)如下: 第一步:安装babel-plugin-transform-object-rest-spread cnpm install babel-plugin-transform-object-rest-spread 第二

实例分析Vue.js中 computed和method不同机制

在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

angular.js和vue.js中实现函数去抖(debounce)

问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间.本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖. angular.js中解决方案 把去抖函数写成一个service,方便多处调用: .factory('debounce', ['$timeout','$q', function($timeou

前端组件:超好用的日期选择器,支持全部日期格式已经Vue.js中的使用

首先官网地址:https://www.layui.com/laydate/ 高达11w的下载量 效果: 怎么使用这个呢? 首先当然就是导包了,自己去官网下哈 需要主注意的是, laydate.js 和theme文件下要放在同一级目录,自己也可以在laydate.js搜索关键字 theme 去修改对应路径,为了省去麻烦咋们就直接放在同级目录. 一般js的使用 Date.prototype.Format = function (formatStr) { var str = formatStr; va

什么是vue.js中的自定义指令?

问题一:什么是vue.js中的自定义指令? 自定义一些指令对底层DOM进行操作 更多参考 Vue里面有许多内置的指令,比如v-if和v-show,这些丰富的指令能满足我们的绝大部分业务需求,不过在需要一些特殊功能时,我们仍然希望对DOM进行底层的操作,这时就要用到自定义指令. 问题二:自定义指令的几个钩子函数 bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中). upda

vue.js 中slot 用处大(转载)

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <

[译]怎样在Vue.js中使用jquery插件

原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候. 问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力. 我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以

关于vue.js中列表渲染练习

html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title></head><body> <!-- v-for可以将一组数组渲染到列表当中 --> <!-- 以item in items的形式 其中 items是源数据 item是他的别名 --&