JS对象迭代

知识点

v-for

v-for

循环JS对象，把对象内容循环显示到页面上。

<div id="myApp"><h1>JS对象迭代</h1><div v-for="(value, key) in mygame">{{ key }} : {{ value }}</div>
</div>
<script>var myApp = new Vue({el: '#myApp', data: {mygame: {title: "乌贼娘2代",price: 350,pubdate: "2017年夏季",category: "射击",agerange: "全年龄",},},});
</script>

显示
事件处理器

知识点

v-on:(event)/@(event)

v-on:(event)

页面元素的事件绑定。（click,keyup,load等等）

<div id="myApp"><h1>事件处理器</h1><input id="txtName" v-on:keyup="txtKeyup($event)"><button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
<script>var myApp = new Vue({el: '#myApp', data: {},methods: {txtKeyup: function(event){this.debugLog(event);},btnClick: function(event){this.debugLog(event);},debugLog:function(event){console.log(event.srcElement.tagName, event.srcElement.id, event.srcElement.innerHTML, event.key?event.key:"");},},});
</script>

表单控件绑定

知识点

v-model
input[type=“text”]

v-model

为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量）

<div id="myApp"><h1>表单控件绑定</h1><input type="text" v-model="message" placeholder="来呀，编辑我吧！"><p>Message is: {{ message }}</p><textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
</div>
<script>var myApp = new Vue({el: '#myApp', data: {message: "我爱马里奥",},methods: {},});
</script>

表单复选框

知识点

v-model
input[type=“checkbox”]

表单复选框绑定

<div id="myApp"><h1>表单复选框</h1><input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames"><label for="生化危机7">生化危机7</label><input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames"><label for="模拟飞行">模拟飞行</label><input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames"><label for="塞尔达传说">塞尔达传说</label><br><p>您选择的游戏是: {{ checkedGames }}</p>
</div>
<script>var myApp = new Vue({el: '#myApp', data: {checkedGames: []},methods: {},});
</script>

显示：

表单单选按钮

知识点

v-model
input[type=“radio”]

表单单选按钮绑定

<div id="myApp"><h1>表单单选按钮</h1><h3>选择性别</h3><input type="radio" id="male" value="男" v-model="pickedSex"><label for="male">男</label><br><input type="radio" id="female" value="女" v-model="pickedSex"><label for="female">女</label><h3>选择爱好</h3><input type="radio" id="game" value="玩游戏" v-model="pickedHobby"><label for="game">玩游戏</label><br><input type="radio" id="movie" value="看电影" v-model="pickedHobby"><label for="movie">看电影</label><h3>选择结果</h3><p>性别: {{ pickedSex }}</p><p>爱好: {{ pickedHobby }}</p></div>
<script>var myApp = new Vue({el: '#myApp', data: {pickedSex: "",pickedHobby: "",},methods: {},});
</script>

显示：

JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮相关推荐

java控件数组_java通过复选框控件数组实现添加多个复选框控件示例分享
思路如下: 创建JPanel面板对象: 使用JPanel类的setLayout(0,4)方法设置网格布局管理器,即列数为4,行数自动调节: 创建一个字符串型一维数组作为控件文本数组: 创建一个JChe ...
java控件数组_java通过复选框控件数组实现添加多个复选框控件
编写程序,通过复选框控件数组事先选择用户爱好信息的复选框,在该程序中,要求界面中的复选框数量可以根据指定复选框名称的字符串数组的长度来自动调节.方法如下: 创建JPanel面板对象: 使用JPanel ...
android勾选控件_Android中CheckBox复选框控件使用方法详解
CheckBox复选框控件使用方法,具体内容如下一.简介 1. 2.类结构图二.CheckBox复选框控件使用方法这里是使用java代码在LinearLayout里面添加控件 1.新建Linea ...
bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
Vue基础之表单控件绑定
你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据, ...
c++ post请求_Golang GinWeb框架5绑定请求字符串/URI/请求头/复选框/表单类型
简介本文接着上文(Golang GinWeb框架4-请求参数绑定和验证)继续探索GinWeb框架只绑定查询字符串使用SholdBindQuery方法只绑定查询参数, 而不会绑定post的数据. ...
PHP处理Checkbox复选框表单提交
PHP表单提交页面复选框的名称后要加[],这样在接收页面才能得到正确的结果.表单提交后得到的是一个数组,然后通过访问数组元素得到表单的具体vaule值.得到的checkbox1的值,默认有</b ...
解决AJAX表单用POST方式提交Checkbox复选框的问题
用AJAX的POST方式提交表单,函数如下: function createXMLHttp() { var xmlhttp = false; try { xmlhttp = new ActiveXOb ...
css复选框表单,用CSS来美化表单——复选按钮篇
原标题:用CSS来美化表单--复选按钮篇今天,我们来学习如何利用CSS美化checkbox复选框按钮,过程非常简单,本文主要是提供美化复选框按钮的方法,至于美化到何种程度还需大家自己去举一反三,发挥 ...

JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮

JS对象迭代

知识点

v-for

显示
事件处理器

知识点

v-on:(event)

表单控件绑定

知识点

v-model

表单复选框

知识点

表单复选框绑定

显示：

表单单选按钮

知识点

表单单选按钮绑定

JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮相关推荐

最新文章

热门文章

JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮

JS对象迭代

知识点

v-for

显示 事件处理器

知识点

v-on:(event)

表单控件绑定

知识点

v-model

表单复选框

知识点

表单复选框绑定

显示： 表单单选按钮

知识点

表单单选按钮绑定

JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮相关推荐

最新文章

热门文章

显示
事件处理器

显示：

表单单选按钮