Vue_小练习
2024-09-02 00:34:46
<!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'>
<script src='../lib/vue-2.4.0.js'></script>
<title>title</title>
</head>
<body>
<div id='app'>
<input type="text" v-model="str1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="str2">
<button @click="result">=</button>
<input type="text" v-model="str3">
</div>
<script>
var demo = new Vue({
el: '#app',
data: {
str1:0,
str2:0,
str3:0,
opt:'-'
},
methods:{
result(){
var codeStr = parseFloat(this.str1)+this.opt+parseFloat(this.str2)
this.str3 = eval(codeStr)
} }
})
</script>
</body>
</html>
v-model下的简易 计算器
<!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'>
<script src='../lib/vue-2.4.0.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<button @click="start">触发</button>
<button @click="stop">停止</button>
<p>{{str}}</p>
</div>
<script>
var demo = new Vue({
el: '#app',
data: {
str:"今天天气好晴朗，处处好风光!",
flag:null
},
methods:{
start(){ if (this.flag!=null){
return
}
this. flag = setInterval(()=>{ var start1 = this.str.substring(0,1)
var end1 = this.str.substring(1)
this.str = end1 + start1 },400)
},
stop(){
clearInterval(this.flag)
this.flag =null
}
}
})
</script>
</body>
</html>
v-model下的跑马灯实验
最新文章
- Object类.
- Pointers and Dynamic Allocation of Memory
- vs2010 使用vs online账号 需要安装的插件
- JSP 容易弄混的几点总结
- js 引用类型比较
- BZOJ 2299 向量
- W3C vs. WHATWG HTML5 Specs – The Differences Documented
- 原生JS实现Ajax及Ajax的跨域请求
- codeforces 893B Beautiful Divisors 打表
- XAMPP重要文件目录及配置
- django项目前期准备
- html css样式子元素相对父级元素定位
- [.NET] 一个获取随机数的新方式
- plupload多个实例，返回区分实例的返回
- react组件回顶部
- Matplotlib：tick_params参数设置
- PAT 1086 就不告诉你（15 ）（代码）
- 执行shell脚本的四种方式（转）
- vue select下拉框绑定默认值
- 删除排序数组中的重复数字 II · Remove Duplicates from Sorted Array II