现在我用上面提到的这几点编写一个前端计数器，用户可以在输入框输入任意数字，点击按钮进行总数累加
下面贴碰郑掘上代码，看不懂的话翻上去再看一遍
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/笑核javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="firstVue">
<p><input type="number" v-model="inputNum" /><button @click="add()">ADD</button></p>
<p>{{total}}</p>
</div>
</body>
<script type="text/丛败javascript">
var myVue = new Vue({
el:'#firstVue',
data:{
inputNum:0,
total:0
},
methods:{
add:function(){
this.total = parseInt(this.total) + parseInt(this.inputNum)
}
}
})
</script>
</html>
javaScript 框架
简化Dom的 *** 作
响应式数据驱动
简单的vue程序：
1.导入开发版本的vue.is
2.创建vue实例对象，设置el属性和data属性
3.使用简介的模版语法把数据渲染到页面上
vue实例可以使用双标签挂载，不能使用HTML和BODy来进行
v-text .设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)
v-html (1.内容中有html结构会被解析成标签 2.设置元素的innerHTML)
注：解析文本使用 v-text . 解析hml使用v-html
v-on(1.为元素绑定事件，2.事件名不需要写on,3.指令可以简写@ 4.绑定的方法定义在methods属性中5.方法内部可以通过this关键字访问定义data中的数据)
计数器（创建实例v-on事件和方法绑定，实时更改数据）
v-show(1.根据元素的真假切换元素的显示状态 2.原理是修改元素的display实现元素的隐藏)
v-if(1.根据烂埋表达式的真假切换元素的显示状态 2.本质是 *** 作dom 3.表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)
注：v-show和v-if的区别：
v-show：只是改变了display属性的饥链蚂 *** 作
v-if：改变的是dom数
实际情况 频繁切换的使用v-show
v-bind (1.为元素绑定属性 2.完整写法v-bind:属性名 3.简写的话可以只写:属性名)
图片切换（1.用数组来存放元素 2.用v-on来绑定事件 3.用v-bing来修改元素的属性）
v-for(1.根据数据生成列表 2.v-for长和)
v-on (补充)（1.时间绑定的方法写成函数调用的形式，可以传入自定义参数
2.定义方法时定义形参数来接受传入的实参
3.通过.修饰符可以对事件进行限制）
例如：@keyup.enter
v-model(1.便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素值相关联
3. 表单的 数据=绑定的数据)
记事唤手本实战演练(1.增加 2.删除 3.隐藏 4.清空 )
注：shift()函数删除的是数组中的第一个元素 使用splice删除指定的某个元素
你可以使用Vue来创建一个简单的应用程序，该应用程序可以在页面上使用input输入两个数，并计算这两个数之间谨历的偶数和。下面是一个简单的示例代码：
<template>
<div>
<label>第一个数字:</label>
<input type="number" v-model="num1" />
<br />
<label>第二个数字:</label>
<input type="number" v-model="num2" />
<br />
<button @click="calculateSum">计算偶数和</button>
<p>偶数和: {{ evenSum }}</p>
</div></template><script>export default { data() { return { num1: 0, num2: 0, 派芦evenSum: 0
}
}, methods: { calculateSum() { let sum = 0 for (let i = this.num1i <= this.num2i++) { if (i % 2 === 0) {
sum += i
}
} this.evenSum = sum
}
}
}</script>
在上面的代码中，我们使用了两个input元素来获取用户输入的两个数字，并将它们绑定到Vue实例的数据属性num1和num2上。我们还定义了一个方法calculateSum()，该方法会在用户点击“计算偶数和”按钮时被调用。在这个方法中，我们使用了一个循环来遍历从num1到num2之间的所有数字，并检查它们是否为偶数。如果是偶数，则将其累加到变祥羡搜量sum中。最后，我们将计算出的结果赋值给Vue实例的数据属性evenSum，并在页面上显示出来。
希望这些信息对你有所帮助！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）