1、用表达式实现计算： 用v-if来绑定输入框和结果 用v-model双向绑定输入和结果

最新推荐文章于 2023-09-16 17:59:12 发布
最新推荐文章于 2023-09-16 17:59:12 发布
阅读量399 收藏
点赞数
文章标签： javascript servlet 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shikunzuishuai/article/details/129940941
版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
            <!-- 这里得type如果写number，后面的绑定就不用加上“.number” -->
   <input type="text" v-model.number="num1"/>
   <select v-model="opt">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
   </select>
   <input type="text" v-model.number="num2" />
   <br />
   <div>
    <p v-if="opt=='+'">结果：{ {num1+num2}}</p>
    <p v-if="opt=='-'">结果：{ {num1-num2}}</p>
    <p v-if="opt=='*'">结果：{ {num1*num2}}</p>
    <p v-if="opt=='/'">结果：{ {num1/num2}}</p>
   </div>
  </div>
 </body>
 <script type="text/javascript">
  var vm = new Vue

最低0.47元/天 解锁文章
shikunzuishuai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue】事件绑定、样式绑定及v-if、v-show、v-for渲染
webxuj的博客
08-30 738
可以阻止冒泡，阻止从当前元素经过的所有冒泡行为。事件只触发一次,触发完之后,事件就会解绑。绑定点击事件 可以简写方式。添加事件侦听器时让事件在捕获阶段触发。嵌套的标签会有冒泡行为，使用。......
对vue中v-if的常见使用方法详解
10-17
今天小编就为大家分享一篇对vue中v-if的常见使用方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue动态绑定class、v-if等
weixin_42216094的博客
09-27 6791
vue中动态绑定的写法与简单使用。
Vue基础语法 事件绑定:v-on: v-if: v-for: (四)
weixin_46022934的博客
12-02 908
1.v-on(绑定事件) 2.v-if 3.v-for遍历
【Vue2】v-if 绑定的数组或对象属性变化不响应问题解决详解
NineWaited的博客
08-10 4589
具体内容与双向绑定、$set()方法相关。整体内容过长，如果想参考最终解决，直接跳到总结即可；如果想要看一下实际情况，可以耐心浏览。
【Vue】（1）基础知识 | MVVM | 基础指令 | v-model | v-for | v-if | v-show | 实例
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
07-14 724
VueJS 基础 MVC与MVVM Vue只关注视图层，是一套构建用户界面的框架。 app.js :项目的入口模块，一切的请求，都要先进入这里进行处理。（注意：app.js并没有路由分发功能，需要调用router.js模块进行路由的分发处理） router.js：这是路由分发处理模块：为了保证路由模型的只能单一，router.js只负责分发路由，不负责具体业务逻辑的处理（如果涉及到业务逻辑处...
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
在Vue.js中，`v-model` 是一个非常重要的指令，它实现了双向数据绑定，使得Vue实例的数据和表单控件的值能够实时同步。在HTML表单元素上使用`v-model`，我们可以轻松地处理用户输入，而无需手动编写事件监听器和数据...
v-model-demo:双向数据绑定源码简易实现
03-23
在Vue.js框架中，`v-model` 是一个非常核心且强大的特性，它实现了视图（View）和模型（Model）之间的双向数据绑定。这个特性使得开发者可以轻松地更新UI组件的状态，并同步到应用的数据模型中，反之亦然。在本项目...
vue.js指令v-model实现方法
10-20
Vue.js的`v-model`指令是其核心特性之一，它为开发者提供了数据双向绑定的能力，使得视图与模型之间的交互变得更加简单和直观。在HTML表单元素如`<input>`、`<select>`或`<textarea>`上使用`v-model`，能够实时反映...
vue.js 实现v-model与{{}}指令方法
10-17
在内部，`v-model` 实际上是通过监听输入事件并更新数据，以及在数据变化时更新输入框的值来实现的。 ```javascript // 假设我们有一个Vue实例 new Vue({ data: { message: 'Hello Vue!' } }) ``` 在HTML模板中...
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
03-08
在Vue中，有几个核心指令用于构建动态用户界面，这些指令包括`v-for`、`v-bind`、`v-if/v-else`、`v-show`、`v-model`和`.v-on`。下面将详细介绍这些指令的使用方法和场景。 1. `v-for`: 这个指令用于在DOM元素上...
v-if、v-else-if和v-else与计算属性computed简单对比
GG_Zdd的博客
01-14 580
v-if、v-else-if和v-else与计算属性computed对比 对于条件判断指令不够深入，特此与计算属性computed做个简单对比，加深一下对于这个的理解。如果有小伙伴想要深入了解Vue.js框架的条件渲染可以去官方文档看一下哦。 官网文档：条件渲染-Vue.js https://cn.vuejs.org/v2/guide/conditional.html 话不多说上代码： <!DOCTYPE html> <html lang="en"> <head> &
【Vue】vue中v-if的用法
Jacker
09-16 7870
v-else-if可以用来检查多个条件，当v-if的表达式为false时，会检查v-else-if中的表达式，如果为true就执行相应的代码块，如果v-else-if的表达式也为false，则执行v-else中的代码块。需要注意的是，v-if和v-show的使用有所不同，如果在需要频繁切换的元素上，建议使用v-show，因为v-if会对DOM进行频繁的增删操作，而v-show仅仅只是控制CSS属性的变化，会更加高效。v-if是Vue.js中常用的条件渲染指令，根据表达式的值来动态控制元素的显示或隐藏。
v-show和v-if
Celester_best的博客
03-07 1664
v-show和v-if的区别 v-show和v-if都是vue中进行条件渲染的指令。 1、v-show和v-if控制元素显示与隐藏的方式不同 v-show是通过控制dom元素的display属性来控制元素的显示与隐藏；而v-if是直接在dom树中添加或者删除元素来控制元素的显示与隐藏。 元素处于显示状态： 元素处于隐藏不可见状态： 可以看到当元素处于可见状态时，元素的属性并没有什么区别，但是当设置v-show和v-if为false时，就可以看出明显的差别——v-show控制的元素多了..
v-show条件渲染
xiaoxingxingzai的博客
08-27 3011
v-show条件渲染 1.另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： <h1 v-show="ok">Hello!</h1> 值0也表示false，其他数值表示true。 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 注意，v-show 不支持 <t...
基础篇随笔-vue属性绑定、v-if与v-show、v-for、侦听器
JHY_USER的博客
12-19 508
1、属性绑定：即使是标签本身自带的属性，如要进行属性绑定，前面亦需添加 冒号 : <input :value="content"/> 2、v-if与v-show：v-if控制dom元素显示\隐藏；v-show控制css样式显示\隐藏，优先选择v-show使用，降低渲染dom的频次 3、 ...
Vue的实例，数据绑定和v-if,v-show,v-for
AiDeMoLia的博客
05-19 702
{{number}}：插值表达式，也就是把number的值插入到h1之中； v-text="number"：h1的内容由number这个变量决定，v-text是Vue中的一个指令，这个指令里面的东西跟着的是一个变量，它告诉h1显示的内容就是"number"这个变量； v-html="content"：v-html与v-text的区别是，v-html不会转义，而v-text会转译； v-on:click="handleClick"：通过v-on给元素绑定一个Click事件，事件触发方法。 v-on:c
vue中v-for、v-if的渲染和数据绑定问题
qq_41097244的博客
10-19 1098
学习vue时，知道全局事件总线/自定义事件中需要进行数据的绑定，从而进行父子组件间的数据传输。 需要注意的是，父子组件中的数据何时进行绑定，是需要根据业务逻辑来的。寻常的数据绑定在挂载之后进行绑定即可，但是vue是挂载和数据渲染分开的，当使用到v-for、v-if等需要在渲染阶段重新加载数据的，mounted处进行绑定显然是不行的。 比如开发时遇到的问题：v-for渲染出的组件中，需要接受它的三个子组件的传递的数据，当用户在输入了子组件的内容，并点击确认时，才会完成子组件的数据绑定。那父组件应该何时完成它的
vue v-if方法扩展写法
南宫凌萱的博客
11-05 6255
在使用vue的时候，经常会使用到v-if、v-else-if、v-else通过条件来判断具体显示某种信息，这种方法虽然可以实现，在整体代码看起太过低级，可用以下两种方式来替代： 例1： &lt;span v-if="YJLX=='1'"&gt;收件箱&lt;/span&gt; &lt;span v-else-if="YJLX=='2'"&gt;发件箱&lt;/span&gt; &lt;spa
vue v-if 导致input不双向绑定
最新发布
06-27
为了恢复双向数据绑定，你应该在 `v-if` 的父元素上使用 `v-model`，而不是直接绑定到输入框上。 举个例子： ```html <div v-if="showInput"> <input v-model="value"> <!-- 这里有问题 --> ``` 正确做法是： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值