Vue.js(二)---相关语法介绍第三部分
2021-01-22 04:12
阅读：711
YPE html>
标签：enc head table sele racket lock loaded utf-8 span
-
vue中的按键修饰符，对回车键进行演示
html>
head>
meta charset="utf-8">
title>vue中的按键修饰符title>
script type="text/javascript" src="js/Vue.js">script>
head>
body>
div id="app">
input type="text" v-on:keydown.enter="fun1" />
div>
body>
script>
new Vue({
el:‘#app‘,
methods:{
fun1:function(){
alert("按下的是回车")
}
}
});
script>
html>
?
vue中v-for的使用
v-for遍历数组
- {{item}}
?
html>
head>
meta charset="utf-8">
title>v-for遍历对象title>
script type="text/javascript" src="js/Vue.js">script>
head>
body>
div id="app">
ul>
li v-for="(key,value) in product">{{key}}={{value}}li>
ul>
div>
body>
script>
new Vue({
el:‘#app‘,
data:{
product:{
id:1,
name:"笔记本电脑",
price:5000
}
}
});
script>
html>
?
?
v-for遍历对象
序号
编号
名称
价格
{{index+1}}
{{product.id}}
{{product.name}}
{{product.price}}
?
vue中v-model的使用(可以从json格式数据中取值)
html>
head>
meta charset="utf-8">
title>v-modeltitle>
script type="text/javascript" src="js/Vue.js">script>
head>
body>
div id="app">
form action="" method="post">
用户名：input type="text" name="username" v-model="user.username" />br />
密码：input type="text" name="password" v-model="user.password" />
form>
div>
body>
script>
new Vue({
el:‘#app‘,
data:{
user:{
username:"admin",
password:"admin"
}
}
});
script>
html>
?
Vue.js(二)---相关语法介绍第三部分
标签：enc head table sele racket lock loaded utf-8 span
原文地址：https://www.cnblogs.com/juddy/p/13289107.html
评论
亲，登录后才可以留言！