vue中v-model 数据双向绑定
表单输入绑定
v-model 数据双向绑定,只能应用在input /textare /select
<div id="app">
<input type="text" v-model="msg">
<p>{{ msg }}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return{
msg: ' alex '
}}
})
</script>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
span.active{
color:red;
}
</style>
</head> <body>
<div id="app">
<div>
<span @click="handlerClick(index)" v-for = "(category,index) in categoryList" :key="category.id" :class="{active:index==currentIndex}">
<!--绑定属性-->
{{ category.name }}
</span> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src='./vue.js'></script>
<script>
let vm = new Vue({ // 声明变量 实例化一个对象vm(指的是vue的实例)
el: "#app", //绑定根元素
//数据属性
data(){ //这里有obsever
//返回的数据跟后端数据库里的有关,如果是动态的数据,存的是数据结构
return {categoryList:[],currentIndex:0}
},
methods:{
handlerClick(i){this.currentIndex=i;}
},
created(){
$.ajax({
//请求后端数据 ****
url:"https://www.luffycity.com/api/v1/course_sub/category/list/",
type:"get",
// success:function(data){
//后端数据渲染回来
success:(data)=>{ //data 一般是从后端返回给前端的
console.log(data); //Object
//data:(6) [{…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
//error_no:0
//proto__:Object if (data.error_no === 0){
var data=data.data;
let obj={
id:0,
name:"全部",
category:"0"
}
this.categoryList = data;
this.categoryList.unshift(obj)
//把data赋值给categoryList
console.log(this)//拿到的是一个ajax对象,
// 所以把上面的匿名函数改成箭头函数 //改成箭头函数之后得到的是vue对象
this.categoryList=data;
}
}, error:function(err){
console.log(err);
}
})
}
})
</script> </body>
</html>
vue中v-model 数据双向绑定的更多相关文章
- vue中v-model的数据双向绑定(重要)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决Vue中文本输入框v-model双向绑定后数据不显示的问题
前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...
- vue Object.defineProperty Proxy 数据双向绑定
Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...
- [vue]通过watch实现数据双向绑定
modal:单向绑定 <head> <meta charset="UTF-8"> <title>test</title> <s ...
- Vue中MVVM模式的双向绑定原理 和 代码的实现
今天带大家简单的实现MVVM模式,Object.defineProperty代理(proxy)数据 MVVM的实现方式: 模板编译(Compile) 数据劫持(Observer) Object ...
- Vue.js学习 Item4 -- 数据双向绑定
Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...
- [vue]实现父子组件数据双向绑定
参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...
- 搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- vue中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...
随机推荐
- 企业都适用的自助式BI工具
未来的BI将是自助BI的时代.随着数据爆发式增长,像ERP.OA.CRM等系统在企业运用的越来越多,这些系统的使用必然会产生很多的数据.随着大数据的到来,企业在数据分析展现层面,面临着困境.下面就给 ...
- 【01】Maven依赖插件之maven-dependency-plugin
一.插件目标(goal) 1.analyze:分析项目依赖,确定哪些是已使用已声明的,哪些是已使用未声明的,哪些是未使用已声明的 2.analyze-dep-mgt:分析项目依赖,列出已解析的依赖项与 ...
- CLR 详解
公共语言运行时就是按照CLI标准制作的执行托管代码的环境.CLR 能运行非托管代码. 公共语言运行的功能:代码JIT/AOT编译. 内存管理 .垃圾回收.异常处理.反射服务.安全服务.程序集加载.本 ...
- Netty与Spring Boot的整合
最近有朋友向我询问一些Netty与SpringBoot整合的相关问题,这里,我就总结了一下基本整合流程,也就是说,这篇文章 ,默认大家是对netty与Spring,SpringMVC的整合是没有什 ...
- Python：lxml
学习自: python3解析库lxml - Py.qi - 博客园 lxml官方文档 lxml官方文档--lxml中的类.方法使用,如果需要查看某些方法的具体用法,就到这个网页下 python爬虫系列 ...
- Scrapy：用cmdline运行爬虫后导致主程序也结束——CrawlerProcesser
学习自: Scrapy官方文档--CrawlerRunner相关 解决django或者其他线程中调用scrapy报ReactorNotRestartable的错误 - liuxianglong - 博 ...
- 图表控件Tchart的使用总结
用了一段时间的Tchart,做下记录总结,以便日后查用,有新的记录会及时添加更新 鼠标右键选择Edit可以对图表进行编辑 添加所需图表: Chart --> Series--> Add 1 ...
- Jmeter---压力模式
需求 下面有3个场景,思考一下在jmeter里面如何设计 场景1:有一个项目,500用户同时登录,响应时间能达到多少场景2:考勤打卡,最大吞吐量能达到多少(每秒最大能完成多少笔打卡业务)场景3:银行业 ...
- JUC知识点总结（知识点见内部目录）
目录 JUC是什么 锁 Synchronized VS Lock 实现差异 Synchronized & Lock 总结 Synchronized锁的对象是什么 生产者&消费者 只有两 ...
- Actor model 的理解与 protoactor-go 的分析
Overview Definition From wikipedia The actor model in computer science is a mathematical model of co ...