<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插值，插入图片，属性的更多相关文章

  1. vue.js初探：计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  2. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

  3. Vue.js中的图片引用路径问题

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一: 在data里面定义好图片路径: /*错误写法*/ imgUrl:'../assets/logo.png' 在templat ...

  4. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  5. Vue.js：监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  6. vue.js如何在标签属性中插入变量参数

    html的标签的属性,比如id.class.href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法: v-bind:属性=" '字符串'+ ...

  7. vue.js中引入图片

    vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...

  8. Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  9. Vue.js系列之四计算属性和观察者

    一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...

随机推荐

  1. 剑指Offer 44. 翻转单词顺序列 （字符串）

    题目描述 牛客最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fish写的内容颇感兴趣,有一天他向Fish借来翻看,但却读不懂它的意思.例如,"st ...

  2. web（七）css的语法规则、注释

    css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...

  3. js 拷贝clone

    array Array.prototype.clone=function(){ return this.slice(0); } 对象 var o = {a: [1]}; //浅拷贝 var o1 = ...

  4. JAVA高级篇(一、JVM基本概念)

    一.什么是JVM VM的中文名称叫Java虚拟机,它是由软件技术模拟出计算机运行的一个虚拟的计算机. JVM也充当着一个翻译官的角色,我们编写出的Java程序,是不能够被操作系统所直接识别的,这时候J ...

  5. manhattan plots in qqplot2

    ###manhattan plots in qqplot2library(ggplot2)setwd("~/ncbi/zm/XPCLR/")read.table("LW. ...

  6. PythonStudy——列表的常用操作 List of common operations

    # 1.索引取值: 列表名[index] s1 = [1, 3, 2] print(s1[0]) print(s1[-1]) # 2.列表运算: 得到的是新list s2 = [1, 2, 3] pr ...

  7. 在IDEA中实战Git-branch

    工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...

  8. 【转】C++中嵌入python程序——参数传递

    C++中嵌入python程序——参数传递 前面两篇博客已经介绍如何在C++中嵌套使用 python,但是在实际使用中,我们需要向python传递各种各样的参数,这样的程序才具有更高的灵活性.下面简单介 ...

  9. 在内存中加载DLL

    有个需求是把一个DLL作为数据打包到EXE中,运行的时候动态加载.但要求不是释放出来生成DLL文件加载. 花了一天时间做出来.效果还可以. 不过由于是直接分配内存加载DLL的.有一些小缺陷.例如遍历进 ...

  10. Flask--(项目准备)--框架搭建，配置文件抽取，业务逻辑抽取

    抽取配置文件: import logging from redis import StrictRedis class Config(object): """项目的配置&q ...