在C#的MVC中 Vue的基本用法实例
2023-09-11 14:19:20 时间
一、定义并实例化容器
$(function () { var vueObj = new Vue({ el: "#step-2", data: { IsRequired:0, PrepayMonths: 0, MakeUpMonths: 0, Title:'', ExtraInfo: [], SSCityType: [], PFCityType:[] }, watch: { } }); initialPage(); });
二、给容器赋值
AjaxJson("../../Sh/GetCityData?cityId=" + cityId, "get", null, function (data) { console.info(data); if (data.SSCityType.length != 0) { vueObj.IsRequired = data.IsRequired; vueObj.PrepayMonths = data.PrepayMonths; vueObj.MakeUpMonths = data.MakeUpMonths; vueObj.ExtraInfo = data.ExtraInfo; vueObj.SSCityType = data.SSCityType; vueObj.PFCityType = data.PFCityType; …… } })
三、各种使用方法
1、动态style和input属性
<div class="form-input"> <label :style="{color:(IsRequired==1?'#ccc':'#000')}"><input type="radio" name="IsSS" id="IsSS" value="2" :disabled="IsRequired==1">否</label> </div>
2、循环使用及input动态属性是否选中
<label v-for="(item,index) in SSCityType" :key="index"> <input type="radio" name="InsuredTypeId" id="InsuredTypeId" :value="item.CityTypeId" :checked="index==0">{{item.Name}} </label>
3、实时监听输入框事件
<input type="number" id="SSDIY" v-on:input="checkValue"/>
checkValue是个js方法
4、监听输入框失去焦点事件
<input type="number" id="SSDIY" v-on:blur="checkValue" />
相关文章
- C# 网络编程之Tcp实现客户端和服务器聊天
- Vue_(Router路由)-vue-router路由的基本用法
- C#监控usb设备插拔
- C# Quartz.NET实现动态改变作业调度周期
- C#.NET常见问题(FAQ)-如何将cs文件编译成dll文件 exe文件 如何调用dll文件
- C#中的多态现象
- [Vue] Get up and running with vue-router
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- [Vue] Get up and running with vue-router
- c# mvc 移除多于的视图引擎
- C# 文件流压缩解压
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- C# 变量
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- (三十二)c#Winform自定义控件-表格-HZHControls
- 浅谈C#中的深拷贝(DeepCopy)与浅拷贝(MemberwiseClone)
- C#,哈夫曼编码(Huffman Code)压缩(Compress )与解压缩(Decompress)算法与源代码
- C#实现放大镜
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue: vue-router路由