<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. Django-----加入MD5格式上传图片

    上传图片为什么要加 MD5 ? 答 :避免用户上传图片的时候图片名重复,而引起先上传的图片被后上传的图片所覆盖的失误! MD5是什么? 答:一种被广泛使用的密码散列函数,可以产生出一个128位(16字 ...

  2. SQL注入之Sqli-labs系列第三十四关（基于宽字符逃逸POST注入）和三十五关

    开始挑战第三十四关和第三十五关(Bypass add addslashes) 0x1查看源码 本关是post型的注入漏洞,同样的也是将post过来的内容进行了 ' \ 的处理. if(isset($_ ...

  3. C#泛型中的抗变和协变

    在.net4之前,泛型接口是不变的..net4通过协变和抗变为泛型接口和泛型委托添加了一个重要的拓展 1.抗变:如果泛型类型用out关键字标注,泛型接口就是协变的.这也意味着返回类型只能是T. 实例: ...

  4. 颜色的RGB-计算HSV公式色度/饱和度/亮度 简化代码

    计算颜色的HSV值 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创新! ...

  5. PHP常见错误级别及错误码

    数字 常量 说明 1 E_ERROR 致命错误,脚本执行中断,就是脚本中有不可识别的东西出现 举例: Error:Invalid parameters. Invalid parameter name ...

  6. Shell脚本、Shell脚本结构、date命令的用法、变量

    1.Shell脚本: shell是一种脚本语言 目的:可以实现自动化运维,能大大增加运维的效率.2.Shell脚本结构:   #!/bin/bash  以#!/bin/bash开头,即以/bin/ba ...

  7. [CSL 的魔法][求排序最少交换次数]

    链接:https://ac.nowcoder.com/acm/contest/551/E来源:牛客网题目描述 有两个长度为 n 的序列,a0,a1,…,an−1a0,a1,…,an−1和 b0,b1, ...

  8. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  9. 浅谈一下mshta在CVE-2017-11882里的命令构造

    Evi1cg同学前不久放出CVE-2017-11882的一个 python利用脚本,地址在https://github.com/Ridter/CVE-2017-11882/,不过其中一个版本里边有一个 ...

  10. day053 url反向解析图解 模板渲染

    一.语法 两种特殊符号(语法): {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二.变量 1. 可直接用  {{ 变量名 }} (可调用字符串, 数字 ,列表,字典,对象等) ...