这个是事件监听的一个小案例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/vue.js"></script><style>.current{color:red;}</style>
</head><body><div id="app"><ul><li v-for="(item,index) in movies" v-on:click="change(index)"  :class="{current:index===current}">{{item}}--{{index}}</li></ul></div><script>const app = new Vue({el: "#app",data: {movies:["joker","peter","说谎家"],current:0},methods: {change(index){this.current=index}}   })</script></body></html>

v-model 的学习。

基本上有三种写法

v-model="message" 等价于 :value="message" v-on:input="message=$event.target.value"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/vue.js"></script>
</head><body><div id="app"><input type="text" name="" id="name" v-model="message"><br><input type="text" :value="message" v-on:input="valuechange"><br><input type="text" :value="message" v-on:input="message=$event.target.value"><br><h2>你输入的信息为:{{message}}</h2>
</div><script>const app = new Vue({el: "#app",data: {message: ""},methods: {valuechange(event) {this.message = event.target.value;}}})
</script></body></html>

vue.js 事件的案例以及 v-model 的学习相关推荐

Vue.js高仿饿了么外卖App学习记录
(给达达前端加星标,提升前端技能) 开发一款vue.js开发一款app,使用vue.js是一款高效的mvvm框架,它轻量,高效,组件化,数据驱动等功能便于开发.使用vue.js开发移动端app,学会使 ...
vue.js crud_ASP.NET CORE —从零到英雄学习ADO.NET中的CRUD操作
vue.js crud ADO.NET ASP.NET Core中的CRUD操作在此ASP.NET Core教程中,您将从一开始就学习在ADO.NET中进行CRUD操作. 本教程将帮助您学习ADO. ...
[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
Vue.js 事件处理器，医院的胸牌佩戴在哪，给医生护士佩戴赞赏胸牌，对服务质量打分。
<div id="app"><button v-on:click="counter += 1">增加 1</button>& ...
vue.js贴吧案例
在这里插入代码片 <template> <div> <h3>贴吧</h3> <hr /> <div class="bbs-i ...
Vue.js开发移动端经验总结
作者:阡ゼ陌 https://blog.csdn.net/weixin_44705688/article/details/103961664 移动端适配相对于PC端来说,移动端设备分辨率百花齐放,千 ...
Vue.js 开发移动端经验总结
作者:阡ゼ陌 https://blog.csdn.net/weixin_44705688/article/details/103961664 移动端适配相对于PC端来说,移动端设备分辨率百花齐放,千 ...
vue.js+boostrap最佳实践
一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
全面掌握前端框架Vue.js
整理自菜鸟教程 Vue.js简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽 ...

vue.js 事件的案例以及 v-model 的学习

这个是事件监听的一个小案例。

v-model 的学习。

vue.js 事件的案例以及 v-model 的学习相关推荐

最新文章

热门文章