vue.js插值，插入图片，属性
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/vue.min.js"></script>
<style type="text/css">
.class1{
width:200px;
height:200px;
background : yellow;
}
</style>
</head>
<body>
<div id="mymodel">
{{uname}},{{age}}<br/>
<img :src="imgUrl" />
</div>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
<br>
<div v-bind:class="{'class1': class1}"></div>
</div>
</body>
</html>
<script type="text/javascript">
var mymodeltest = new Vue({
el:'#mymodel',
data: {
uname : 'zhangsan',
age : 20,
imgUrl : '${pageContext.request.contextPath}/img/1.jpg'
}
});
//修改HTML样式
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>
vue.js插值，插入图片，属性的更多相关文章
- vue.js初探：计算属性和methods
在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...
- 2. Vue语法--插值操作&动态绑定属性 详解
目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...
- Vue.js中的图片引用路径问题
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一: 在data里面定义好图片路径: /*错误写法*/ imgUrl:'../assets/logo.png' 在templat ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- Vue.js：监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- vue.js如何在标签属性中插入变量参数
html的标签的属性,比如id.class.href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法: v-bind:属性=" '字符串'+ ...
- vue.js中引入图片
vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...
- Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
- Vue.js系列之四计算属性和观察者
一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...
随机推荐
- FreeSWITCH部署与功能配置
一.FreeSWITCH服务部署 1.wget http://www.freeswitch.org.cn/Makefile && make install 2.cd freeswitc ...
- Linux ssh命令详解
SSH(远程连接工具)连接原理:ssh服务是一个守护进程(demon),系统后台监听客户端的连接,ssh服务端的进程名为sshd,负责实时监听客户端的请求(IP 22端口),包括公共秘钥等交换等信息. ...
- iOS 添加第三方字体
有时候根据UI的设计,我们需要添加第三方字体到工程中,实现特殊的效果. 一,把第三方字体包导入工程 二,在info.plist文件中添加Fonts provided by application 类型 ...
- Centos系统下 Gitolite安装与相关配置（git权限控制软件）
确保已经安装了最新版的git服务Git源码安装 Linux指定安装目录,并且创建了 用户名为git 的账户 修改.gitolite.rc #设置gitolite管理的仓库目录 GL_REPO_BAS ...
- cocos2dx开发之util类&方法——取当前系统时间
返回time_t,即从1970年1月1日至今的秒数 time_t getSysTime(){ time_t currentTime = time(NULL); return currentTime; ...
- matlab数学实验--第一章
一. 数据和变量: 省略号(三个英文句点):表示换行 历史指令调用:用方向键上下 数据显示格式: format short ...
- Javascript 来判断数组的假值如 null false "" NaN
Javascript 来判断数组的假值如 null false "" NaN function bouncer(arr) { arr = arr.filter(function(a ...
- unity的一些tips
主要是我知乎上回答的一个关于unity的tip,备忘. 说说我所看到unity相关的,不好的习惯: 1 尽量不要在Awake(), start()等函数内加入业务逻辑的初始化代码.首先无法简便的直接启 ...
- SAX解析与DOM解析
SAX解析实例:http://www.iteye.com/topic/763895 Java Sax解析是按照xml文件的顺序一步一步的来解析,在解析xml文件之前,我们要先了解xml文件的节点的种类 ...
- 解决双击excel文件打开多个excel.exe进程的问题
解决双击excel文件打开多个excel.exe进程的问题有些时候,双击两个excel文件,会打开多个excel进程,不同进程之间不能复制粘贴公式,只能粘贴数值,很不方便.怎么样双击多个excel文件 ...