Vue中v-model与v-bind区别_笋干zzZ~的博客-程序员资料_vue中model和bind区别

技术标签: 小问题  vue  

Vue中v-model与v-bind区别:

绑定数据的三种方式:
{ {}}从data中取对应的值
v-model:
v-bind:
v-model
主要用于表单元素,实现了双向绑定。在同时使用v-model和v-bind中,v-model能建立双向绑定并且对input,select,textarea具有优先权,而在checkbox中v-bind具有优先权。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<body>
    <div id="vm">
       <input type="text" v-model="title"><br>
        {
   {title}}
    </div>
    <script>
        var vm=new Vue({
     
            el:"#vm",
            data:{
     
               title:"hello vue"
            }
        });
    </script>
</body>
</htm

v-bind
eg:v-bind:href可以简写为:href
当加上v-bind:之后href的值不是字符串,而实vue实例data.link的这个变量,也就是data.link是什么值,href就是得到什么值,当data.link变化而变化的href,这非常适合通过css来实现动画效果,是单向的变动。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<body>
    <div id="vm">
        <a href="link">baidu</a>
        <input v-model="link">baidu</input>
        <a v-bind:href="link">baidu</a>
        <a :href="link">baidu</a>
    </div>
    <script>
        var vm=new Vue({
     
            el:"#vm",
            data:{
     
               link:"http://www.baidu.com"
            }
        });
    </script>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sungancd/article/details/118500269

智能推荐

VSTO:使用C#开发Excel、Word【17】_初仔仔的博客-程序员资料

使用Range对象Range对象表示电子表格中的单元格范围。范围可以包含一个单元格,多个连续的单元格,甚至多个不连续的单元格。您可以在Excel中选择时按住Ctrl键选择多个不连续的单元格。获取特定Cell或Cells范围对象Excel提供了多种获取Range对象的方法。 Range对象是您要在Excel工作表中处理单元格或单元格范围时使用的对象。在Application对象的描述中提到了两种...

介绍PHP7中十个需要避免的坑_Anna_xuan的博客-程序员资料

推荐(免费):PHP71、不要使用 mysql_ 函数这一天终于来了,从此你不仅仅“不应该”使用mysql_函数。PHP 7已经把它们从核心中全部移除了,也就是说你需要迁移到好得多的mysqli_函数,或者更灵活的PDO实现。2、不要编写垃圾代码这一条可能易于理解,但是会变得越来越重要,因为PHP 7的速度提升可能会隐藏你的一些问题。不要仅仅满足于你的站点速度,因为迁移到PHP 7才让它变快。作为一名开发者,你应该总是确保按需加载脚本,尽可能连接它们,编写高效的数据库查询,尽可能使用缓存,以及其它

bootstrap优美的弹出框_浩瀚云海的博客-程序员资料_bootstrap好看的弹出框

使用bootstrap框架发现没有好的提示框在网上还找到一个效果比较炫一点的提示框:sweetalert(1)文档sweetalert Api:http://t4t5.github.io/sweetalert/开源项目源码:https://github.com/t4t5/sweetalert在页面引入:  &amp;lt;link href=&quot;~/Styles/sweetaler...

创建 VSTO 工作簿的windows安装包_vsto环境安装包_苹果 apple的博客-程序员资料

准备工作事先创建一个Excel文件命名为“演示文档.xlsm”的,以实现通过运行名称为“演示”的宏,将A1单元格的内容复制到A2单元格中。1.在“sheet1”的A1单元格输入“1.0.0.0”,作为excel文件的版本号。2.通过开发工具中的Visual Basic,为工作簿添加模块,输入以下代码,建立宏Sub 演示() Range("A2") = Range("A1")End Sub3.文档另存为“演示文档.xlsm”。一、创建Excel VSTO 工作簿的新项目...

14.Tornado高性能的秘密:ioloop对象分析 (副标题:IOLoop是个事件循环)_小煤矿屁的博客-程序员资料_torndof_14是什么意思

网上都说nginx和lighthttpd是高性能web服务器,而tornado也是著名的高抗负载应用,它们间有什么相似处呢?上节提到的ioloop对象是如何循环的呢?往下看。首先关于TCP服务器的开发上节已经提过,很明显那个三段式的示例是个效率很低的(因为只有一个连接被端开新连接才能被接受)。要想开发高性能的服务器,就得在这accept上下功夫。首先,新连接的到来一般是经典的三次握

VSTO开发指南_顺其自然~的博客-程序员资料_vsto

1. VSTO是什么?我们可以用VSTO做什么?VSTO全称Visual Studio Toolfor Office,是可以让我们针对现有的Office程序进行功能扩展。在工作或生活中其实我们或多或少用到过VSTO插件,例如安装有道词典/Adobe Pro会在Office程序中嵌入插件程序。2. VSTO开发环境的准备:(1). 我们的PC上需要安装有Office(Office 20...

随便推点

ROS2学习笔记(五)-- ROS2命令行操作常用指令总结(一)_溪风沐雪的博客-程序员资料_ros2 pkg create

简介:在前面的章节中,我们先简单学习了ROS2的话题发布和订阅,两种操作都是通过python代码实现的,而在实际应用过程中,我们会经常用到命令行操作来辅助调试,更进一步的可以使用GUI工具辅助调试,比如前边用到的rqt中的Image View工具,这一节在现有功能基础上介绍一部分常用的命令行操作指令。

Tensorflow中的subclass_weixin_44504134的博客-程序员资料_subclass='training

Loss以交叉熵为例:tf的loss api一般通过如 tf.metrics.SparseCategoricalCrossentropy(from_logits=True) 创建instance函数,或者不需要pass in参数的情况下:tf.metrics.sparse_categorical_crossentropy, 然后通过metrics(y_true, y_pred)来call这个函数Subclass损失函数需要重写 __init__()和 call() 两个函数__init__

创建 VSTO 外接程序的windows安装包_vsto环境安装包有什么用_苹果 apple的博客-程序员资料

一、创建Excel VSTO 外接程序的新项目(一)新建解决方案和Excel VSTO 外接程序项目创建一个Excel VSTO外接程序的新项目,选择“Excel VSTO外接程序(Visual Basic)”模板,命名为“外接程序安装”。VS将显示解决方案名称为“外接程序安装”,包含“外接程序安装”项目。(二)设计Excel VSTO外接程序主要是设计菜单项和代码。1.在“外接程序安装”项目上,点击右键,选择“添加”——“类”,在“添加新项-外接程序安装”界面,选择“office/sh_1671465600

PL/SQL Developer恢复默认窗口布局(2019年V13.0.0最新版PL/SQL Developer)_快乐李同学(李俊德-大连理工大学)的博客-程序员资料_plsql重置窗口布局

1.问题背景:我们刚接触PL/SQL时,可能不小心关闭了我们需要的窗口,又不知道在哪里再次恢复默认窗口布局,按照以下教程就可正常恢复PL/SQL Developer恢复默认窗口布局。2.解决方案:(1)在Configure-Preferences-User Interface-Appearance里面,有两个Reset选项。(2)Reset Toolbars和Reset Doc...

cJSON介绍及使用demo_延禾xy的博客-程序员资料

文章目录JSON简介JSON的形式JSON示例cJSON简介使用示例JSON简介JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。JSON的两种结构:“名称/值”对的集合(A collection of name/value pairs)。值的有序列表(An ordered list of val...

VSTO程序基本知识(二)_Just4life的博客-程序员资料

开始之前,首先我介绍一下我的开发环境:VS2010 + Office 2010,是基于.Net framework 4.0和VSTO 4.0。以下的范例代码都基于这个,如果你使用的是VS2008,那么问题也不大,基本可以移植过去。需要注意的是.Net framework 4.0中增加了dynamic类型和可选参数,而这两点新的特性在VSTO 4.0中被广泛使用,新特性的详细内容我就不介绍了,(其实

推荐文章

热门文章

相关标签