vue1
2024-08-31 16:40:24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue'
}
});
};
</script>
</head>
<body>
<div id="box1">
<input type="text" v-model="msg">
<input type="text" v-model="msg"> <!-- js里面的没有动态改变,双向数据绑定 -->
<br>
{{msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body', //选择器
data:{
msg:'welcome vue'
}
});
};
</script>
</head>
<body>
<div>
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
msg:'welcome vue',
msg2:12,
msg3:true,
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
{{msg2}}
<br>
{{msg3}} <br>
{{arr}} //apple,banana,orange,pear
<br>
{{json}} //[object Object]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr"> 循环li
{{value}} {{$index}} apple 0
banana 1
orange 2
pear 3
</li>
</ul>
<hr>
<ul>
<li v-for="value in json">
{{value}} {{$index}} {{$key}}
apple 0 a
banana 1 b
orange 2 c
</li>
</ul> <hr>
<ul>
<li v-for="(k,v) in json">
{{k}} {{v}} {{$index}} {{$key}}
a apple 0 a
b banana 1 b
c orange 2 c
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){
this.arr.push('tomato');//数据更新模版自动更新
},
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮1" v-on:click="show()">
<input type="button" value="按钮2" v-on:dblclick="add()">
<input type="button" value="按钮3" v-on:mouseover="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'},
a:true
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<div style="width:100px; height:100px; background: red" v-show="false">
</div> <input type="button" value="按钮" v-on:click="a=!a">
<div style="width:100px; height:100px; background: red" v-show="a"> </div>
</div>
</body>
</html>
最新文章
- python基础-RE正则表达式
- The Pragmatic Programmer Quick Reference Guide
- Java输入输出流（一）——常用的输入输出流
- dubbo properties
- Sample SecondarySort 浅析
- 转-问自己：UI设计注意的十个问题
- activemq demo指南
- PyQt中登录框设计
- 讲座：采用Store检查邮件(1)
- hadoop hdfs uri详解
- 重拾Python(4):Pandas之DataFrame对象的使用
- Linux-centos7下python3 环境设置
- 本人开源项目 Lu-Rpc
- python成长之路二
- Java RMI与RPC的区别
- 应使用sqlplus代替tnsping进行oracle连通性测试
- Web模板引擎—Mustache
- ip定位
- Easyui入门视频教程 第04集---Easyui布局
- JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
热门文章
- 45.angular路由设置
- 21.hash_map(已被废弃不再使用 被unordered_map代替)
- css常用的阴影
- 一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程
- 洛谷 P1368 工艺 后缀自动机 求最小表示
- bzoj1025 [SCOI2009]游戏 动态规划
- HDU-1789 Doing Homework again 贪心问题 有时间限制的最小化惩罚问题
- opencv——图像的灰度处理（线性变换/拉伸/直方图/均衡化）
- .NET 将 .config 文件嵌入到程序集
- 【ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) B】Recursive Queries