03.VUE学习之动态绑定值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
</head>
<body>
<div id="vue">
<!-- 会随着data库里的值动态改变而改变 -->
<h2>{{hd}}</h2>
<!-- v-model是给input动态绑定取data里的hd变量值,并且input里输入的值会动态改变data库里hd的变量值,hd库里的值改变后,又会重新赋值给模板页面里,并刷新模板页面里的值 -->
<input type="text" v-model="hd" name="" value="" placeholder="">
<!-- v-once只绑定一次.只取初始化时data里的hd值,之后动态改变data库里的值,不影响 v-once -->
<h3 v-once>{{hd}}</h3>
</div>
</body>
<script type="text/javascript">
var app=new Vue({
el:'#vue', //绑定id='vue'为的元素
data:{ //相当于数据库
hd:'test data.',
}
});
</script>
</html>
效果:
03.VUE学习之动态绑定值的更多相关文章
- C# bootstrap之表格动态绑定值
这段时间研究了下bootstrap,打算从表格开始学习,实现动态绑定值,在网上找了挺多例子,但是很少有写全的,要不就太复杂,实现效果后总结一下,直接拷贝过去可以用. 第一步:先去官网上下载bootst ...
- vue中循环时动态绑定值
在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ...
- jquery select chosen 动态绑定值
$("#ddlMstData").find("option[value=" + data.MstKey + "]").attr(" ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- vue学习03 v-html
vue学习03v-html v-html指令的作用是:设置元素的内部html链接 内容有html 的结构会被解析为标签 v-text指令无论内容是什么,只会解析文本 解析文本使用v-text,需要解析 ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
- Vue学习系列(三)——基本指令
前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...
- Vue学习记录（一）
一.引入js文件(直接采用CDN): http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js 二.简单实例: (1)HTML代码: &l ...
- vue学习之路 - 4.基本操作（下）
vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...
随机推荐
- postman将上一个请求的结果作为下一个请求的数据
需要在Tests中写入如下代码: var jsonData = JSON.parse(responseBody); postman.setGlobalVariable("token" ...
- docker的卸载方法
卸载: 1.查询docker安装过的包: yum list installed | grep docker 2.删除安装包: yum remove docker-ce.x86_64 ddocker-c ...
- 了解【Docker】从这里开始
一.环境配置的难题 软件开发最大的难题之一就是环境配置的问题.现在用户环境纷乱复杂,并且由于开源社区的进一步推广和许多开源项目不停地迭代更新,项目可能会有越来越多的依赖以及越来越难管理的依赖版本,如何 ...
- SVN的搭建（权限配置篇）
如要转载,请注明出处! 两个问题: 如何维护多个目录或者仓库 目录权限如何设置 ============================================================ ...
- strstr strcpy 函数的实现
一. strcpy 代码实现 #include <iostream> #include <assert.h> #include <iostream> //#incl ...
- Android中intent相关，setFlag(xx);
intent.setFlags(参数)://参数用法如下 :FLAG_ACTIVITY_CLEAR_TOP: 例如现在的栈情况为:A B C D .D此时通过intent跳转到B,如果这个intent ...
- 如何使用VS将项目生成一个安装包？
VS2010项目的部署与安装winform程序,我想进行安装.1.在解决方案中 ——点击右键——添加 2.然后选择 安装和部署 ——安装向导 可以更改名称 3.点击 下一步 4.然后选择上那3个 5. ...
- LEMP (LNMP) Stack-5.4.16 (OpenLogic CentOS 7.2)
LEMP (LNMP) Stack-5.4.16 (OpenLogic CentOS 7.2) 平台: CentOS 类型: 虚拟机镜像 软件包: mariadb-5.5.47 nginx-1.6.3 ...
- Paoding-Rose学习
* HttpServletRequest.getContextPath 获取web程序root.如果是默认位置,返回””空串,否则返回 /根路径名 * rose是如何扫描到资源的 利用spring提供 ...
- 浅谈Scrum敏捷开发：4个输入/输出、3个关键物、3个会议
文章对Scrum敏捷开发流程进行系统的分析,希望借此文能够加深你对敏捷开发的认知,更好的展开产品工作. Scrum敏捷开发,是一种敏捷开发框架,是一个增量的.迭代的开发过程,具备可视.可集成和可运行使 ...