uni-app Vue 笔记总结 (自用)

超、凢脫俗 2023-06-19 02:12 31阅读 0赞

1、json通过key获取value：

rateNum = eval(e.value)
    (key == "value")

2、vue获取input输入框的数据

<textarea maxlength="300" :disabled="false" @input="descInput" placeholder="请输入相关内容..." 
    v-model="desc" ref="descInput" 
    style="height: 400upx"></textarea>
    <text>{
       {remnant}}/300</text>

(1)设置ref

(2)获取数据

var inputStr = this.$refs.descInput.value

3、限制input字数

textarea maxlength="300"

4、实施显示可输入字符数

(1)监听

@input="descInput"
    v-model="desc" 
    ref="descInput"

(2)右下角字符限制300

var txtVal = this.desc.length
    this.remnant = 300 - txtVal

5、uni-app @tap绑定无效，无法触发tap点击事件

原因：检查@tap是否添加在控件上

6、添加原生导航栏自定义按钮

在项目工程pages.json下，添加：
    
    "style": {
    	"navigationBarTitleText": "添加评论",
    	"titleNView": {
    		"buttons": [ //原生标题栏按钮配置,
    			{
    			    "type":"none",
    				"text":"发送",
    				"float":"right",
    				"fontSize":"14"
    			}
    		 ]		
    	    }
    }

7、原生导航栏自定义按钮监听

onNavigationBarButtonTap() {
    	console.log("点击了自定义按钮"); 
    }

8、this用法

在Vue中

var vm = new Vue({
                el: "#root",
                data:data,
                methods: {
                    changeColor() {
                        vm.isClick = true;
                    }
                }
            });

在uni-app中，this 就是Vue中的 vm

9、refs获取组件或元素

获取数据
    var test = this.$refs.(ref属性名).(需要获取的属性或者方法名)
    修改数据
    this.$refs.(ref属性名).(需要获取的属性或者方法名) = xxxx

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp笔记

*pages.json里的设置** 1、style下的navigationBarTextStyle属性指的是顶部导航栏的返回键颜色，black（黑色）/white（白...

Bertha 。/ 2024年04月19日 15:13/ 0 赞/ 107 阅读

相关 uniapp组件库总结笔记

uView-ui [https://www.uviewui.com/][https_www.uviewui.com] 优点：整体样式风格不错缺点：不支持vue3

港控/mmm°/ 2024年03月22日 17:07/ 0 赞/ 131 阅读

相关 uni-app Vue 笔记总结 (自用)

1、json通过key获取value： rateNum = eval(e.value) (key == "value") 2、vue获取input输入框的数

超、凢脫俗/ 2023年06月19日 02:12/ 0 赞/ 32 阅读

相关 git使用经验总结（自用）

Could not open '\\\.VC.opendb'报错如果打开项目的时候，报“Could not open '\\\.VC.opendb'”之类的错误，说明g

旧城等待，/ 2023年06月17日 07:55/ 0 赞/ 53 阅读

相关 logback自用笔记

一个简单的配置 <configuration>

╰+哭是因爲堅強的太久メ/ 2023年05月30日 15:57/ 0 赞/ 42 阅读

相关 STL常用方法总结（自用）

1.Vector 1.1. 初始化基本初始化方法 vector<int> vec; //声明一个int型向量 vector<int

太过爱你忘了你带给我的痛/ 2023年01月04日 13:23/ 0 赞/ 161 阅读

相关软考中级复习笔记【自用】

一、数据结构与算法 1.线性链表：带头结点的线性链表头指针指向头结点，头结点不可被删除，头指针的值不需要修改；不带头结点可删除头结点，删除后需要将头指针指向新

蔚落/ 2022年10月15日 12:51/ 0 赞/ 358 阅读

相关 vue学习（自用）

vue基本指令 v-text 显示文本 v-html 显示网页 v-bind 数据绑定让我们页面上显示的值动态化(单向数据流的体现) 单向数据流:当模型

傷城~/ 2022年06月10日 11:29/ 0 赞/ 369 阅读

相关自用总结

1. 将时间戳转换成日期格式： function timestampToTime(timestamp) { var da

绝地灬酷狼/ 2022年04月15日 06:39/ 0 赞/ 315 阅读

相关 Jvm内存总结（自用）

> 对于不同的Jvm及不同的jdk版本内存模型不同 <table> <thead> <tr> <th align="center">内存区域</th>

ゝ一纸荒年。/ 2022年03月29日 21:20/ 0 赞/ 239 阅读