条件与循环

知识点

v-if
v-for

v-if

条件判断式，根据表达式的真伪进行页面处理。

<p v-if="seen">快看我！</p>

v-for

处理数组循环，将数据循环显示到页面上。

<ol><li v-for="game in games">{{ game.title }}</li>
</ol>

综合例

<div id="myApp"><h3>游戏列表</h3><div v-if="seen">2017最新发卖</div><ol><li v-for="game in games">{{game.title}} / {{game.price}}元</li></ol>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {seen: true,games: [{title:'勇者斗恶龙',price:400},{title:'超级马里奥',price:380},{title:'我的世界',price:99},],},});
</script>

完整代码：

<!DOCTYPE html>
<html lang="zh"><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://unpkg.com/vue/dist/vue.js"></script><link href="../css/style.css" rel="stylesheet"> </head><body><div id="myApp"><h3>游戏列表</h3><!-- Virtual DOM --><div v-if="seen">2017最新发卖</div><ol><li v-for="game in games">{{game.title}} / {{game.price}}元</li></ol></div><script>var myApp = new Vue({el: '#myApp', data: {seen: false, games: [{title: '勇者斗恶龙', price: 400}, {title: '超级马里奥', price: 380}, {title: '我的世界', price: 99}, ], }, });</script>
</body></html>

显示页面：

处理用户输入

知识点

v-model

v-model

为页面输入框进行数据邦定，例如：

input
select
textarea
components

使用例

<div id="myApp"><p>您最喜欢的游戏是：{{mygame}}</p><input v-model="mygame">
</div>
<script>var myApp = new Vue({el: '#myApp',data: {mygame: '超级马里奥'},});
</script>

按钮事件

知识点

v-on

v-on

为页面元素绑定各种事件。（keydown, keyup, click, dbclick, load, etd.）

<div id="myApp"><p>您最喜欢的游戏是：{{mygame}}</p><button v-on:click="btnClick('我的世界')">我的世界</button><button v-on:click="btnClick('勇者斗恶龙')">勇者斗恶龙</button><button v-on:click="btnClick('塞尔达传说')">塞尔达传说</button><button @click="btnClick('魔界战记5')">魔界战记5</button>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {mygame: '超级马里奥'},methods: {btnClick: function(pname){this.mygame = pname;},},});
</script>

v-if、v-for、v-model、v-on相关推荐

CRichEditCtrl 好象没有复制、粘贴的功能(Ctrl+C、Ctrl+v都不好用
CRichEditCtrl 好象没有复制.粘贴的功能(Ctrl+C.Ctrl+v都不好用问题已经解决,是我没有把系统自动生成的快捷键删去.它没有执行RichEdit的消息. 转载于:https:// ...
Oracle 11g 数据恢复数据误删除后的恢复 0、执行 select log_mode from v$database;查看是否为归档模式 1、确定删除时间和被删除的表 04-23，GR
Oracle 11g 数据恢复数据误删除后的恢复 0.执行 select log_mode from v$database;查看是否为归档模式 1.确定删除时间和被删除的表 04-23,GRDA0 ...
R语言使用vcd包的assocstats函数计算两个分类变量的相关性的强弱、计算列联表的Phi系数、列联系数和Cramer’s V系数
R语言使用vcd包的assocstats函数计算两个分类变量的相关性的强弱.计算列联表的Phi系数.列联系数和Cramer's V系数目录
Vue的MVVM（model、view、viewmodel）
MVVM模式:M(model)+ V(view)+ VM(viewmodel)与 MVC模式:M(model).V(view).C(controller)相类似 MVC: 用户向controller层 ...
WideDeep Model、Wide Model（LR）、Deep Model、DeepFm Model、NFM Model复现笔记
声明:本模型复现笔记记录自己学习过程,如果有错误请各位老师批评指正. 本周复现了Wide&Deep Model.Wide Model.Deep Model.DeepFm Model.NFM M ...
R语言临床预测模型：分层构建COX生存回归模型STRATIFIED COX MODEL、KM生存曲线、PH假设检验...
全文链接:http://tecdat.cn/?p=32046 stratified cox model是针对协变量不满足PHA提出的,这里的思想是对协变量分层(点击文末"阅读原文" ...
SpringMVC学习总结（四）使用ModelAndView、Model、Map、ModelMap向request域对象共享数据/向session、application域对象共享数据
我们知道,四大域对象包括:pageContext.request.session和application,而pageContext有效范围为一个jsp页面,太小了,而application有效范围为整 ...
深度学习框架 TensorFlow：张量、自动求导机制、tf.keras模块(Model、layers、losses、optimizer、metrics)、多层感知机(即多层全连接神经网络 MLP)
日萌社人工智能AI:Keras PyTorch MXNet TensorFlow PaddlePaddle 深度学习实战(不定时更新) 安装 TensorFlow2.CUDA10.cuDNN7.6. ...
搭建自己的V Rising自建服务器，以及常见的V Rising服务器问题解决方案
V rising官方服务器经常无法连接,无法和小伙伴玩耍:如何搭建自己的V rising服务器呢?还可以修改掉落倍率,加快游戏进度,搭建自己的私人服务器. 前言最近V rising这个游戏很火呀,迫 ...
知乎大V点赞一个多少费用，知乎大V推广问答发布操作
知乎大V在知乎中有着较大的话语权,很多企业品牌也喜欢和这些知乎大V合作,通过他们去提升品牌知名度,也会找他们对自己的回答点赞,那么知乎大V点赞一个多少费用,下面洛希网络科技为大家介绍知乎大V推广问答发 ...

v-if、v-for、v-model、v-on

条件与循环

知识点

v-if

v-for

综合例

显示页面：

处理用户输入

知识点

v-model

使用例

按钮事件

知识点

v-on

v-if、v-for、v-model、v-on相关推荐

最新文章

热门文章

v-if、v-for、v-model、v-on

条件与循环

知识点

v-if

v-for

综合例

显示页面： 处理用户输入

知识点

v-model

使用例

按钮事件

知识点

v-on

v-if、v-for、v-model、v-on相关推荐

最新文章

热门文章

显示页面：

处理用户输入