vue - vue表单中v-model和:value的区别

记录一下在项目中发现vue表单元素中v-model和:value使用中的一个区别；
首先v-model和:value功能是一样的都能实现数据的双向绑定；但是在页面的渲染过程中会有一些区别

区别：

v-model在渲染的时候不能写表达式；
:value在渲染时可以写成表达式的形式，便于对数据展示的二次转换；

下面来看一下这个简单的案例：

使用:valueage可以写成一个表达式或直接在后面拼接（:value="age +'岁' " ）；使用v-model只能写成一个固定的值，否则会报：'v-model' directives require the attribute value which is valid as LHS，意思是左边需要一个有效的属性值；

  <div class="valueModel">v-model使用:<input type="text" class="age"  v-model="age" /> <br />:value使用 :<input type="text" class="age"  :value="age <10 ? funAge(age) : age" /></div><script>data(){return {age: 10,}},methods(){funAge(age){console.log(age);  return `0${age}岁`},}</script>

效果图：

vue - vue表单中v-model和:value的区别相关推荐

form表单中method的get和post区别
一.问题的提出 <form action="getPostServlet/getPost.do?param4=param4" method="get" ...
html表单中get与post之间的区别
当用户在 HTML 表单 (HTML Form) 中输入信息并提交之后,有两种方法将信息从浏览器传送到 Web 服务器 (Web Server). 一种方法是通过 URL,另外一种是在 HTTP Re ...
php将表单数据存入数据库,php将表单中数据传入到数据库
无标题文档//创建表单姓名 header("Content-type:text/html;charset=utf-8"); if(isset($_POST['submit'])) ...
前端学习（1953）vue之电商管理系统电商系统之根据父类数据处理表单中的数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
vue 输入表单库,在开发项目时节省大量时间
文章目录 1. Vue Select(制作表单) 2. Vue Input Tag(向表单添加标签) 3.Vue Dropdowns(Vue 下拉菜单) 4. Vue Color(颜色选择添加到表单中 ...
Vue.js 表单输入绑定
基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
vue：model和v-model的区别
v-model: 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取 ...
vue.js 表单 v-text
v-text可以替代{{}} <!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org ...
关于Vue的表单验证
前言最近在研究 Vue 如何实现表单的验证,在网上查阅资料以后,简单将这些方法整合一下,方便以后学习.如果有不准确之处,还望指正. Vue 实现表单验证的方法有如下几种: 一.基于 Vue 与 jQ ...
vue自定义表单设计器思路
Vue是一种流行的JavaScript框架,用于构建Web应用程序.Vue的灵活性使得它成为一种非常适合创建自定义表单设计器的框架.本文将介绍如何使用Vue实现一个自定义表单设计器,并最终实现单据自定 ...

vue - vue表单中v-model和:value的区别

vue - vue表单中v-model和:value的区别相关推荐

最新文章

热门文章