05.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> -->
<style type="text/css">
.h1{
color: red;
}
.h2{
color: green;
}
</style>
</head>
<body>
<div id="vue">
<!-- v-once动态改变后不会影响-->
<span v-once>{{n}}</span>
<br/>
<!-- 表达示初始化时会相加,动态改变后表达示再重新计算-->
{{ n + 2}}
<br/>
<span :class="'h'+n">你好vue.</span>
<br/>
<input type="text" v-model="n">
<br/>
<!--单选框的改变动态会影响到data里的n,渐接影响到模板里的n-->
<input type="radio" v-model="n" value="1">红色
<input type="radio" v-model="n" value="2">绿色
</div>
</body>
<script type="text/javascript">
var app=new Vue({
el:'#vue',
data:{
n:1,
}
});
</script>
</html>
效果:
05.VUE学习之表达式的更多相关文章
- vue学习5-js表达式
三目运算符 <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <m ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- Vue学习2:模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
- vue学习01
vue学习01 1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...
- VUE学习总结
VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...
- 20145219 《Java程序设计》第05周学习总结
20145219 <Java程序设计>第05周学习总结 教材学习内容总结 try.catch 1.求平均数程序示例 import java.util.Scanner; public cla ...
随机推荐
- jdbc操作步骤
package com.itheima.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql ...
- Spark Mllib里的如何对两组数据用皮尔逊计算相关系数
不多说,直接上干货! import org.apache.spark.mllib.stat.Statistics 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mlli ...
- Kotlin lateinit 和 by lazy 的区别
1.lazy{} 只能用在val类型, lateinit 只能用在var类型 2.lateinit不能用在可空的属性上和java的基本类型上 3.lateinit可以在任何位置初始化并且可以初始化多次 ...
- JavaSE之Java基础(5)
21.简述正则表达式及其用途. 在编写处理字符串的程序时,经常会有查找符合某些复杂规则的字符串的需要.正则表达式就是用于描述这些规则的工具.换句话说,正则表达式就是记录文本规则的代码. 22.Java ...
- wcf post
服务端: 1.接口 [OperationContract] [ServiceKnownType(typeof(CreatMicroBlogFeedViewModel))] [WebInvoke(Bod ...
- #include stdio.h(2)
#include <stdio.h> //mian函数是程序的入口 int main() { /* //函数:是按一定的格式对一段代码的封装 //专门用来实现一功能的代码合集,可以重复使用 ...
- AppScale3.01
平台: Ubuntu 类型: 虚拟机镜像 软件包: appscale appscale-tools app appscale appserver basic software cloud comput ...
- LeetCode Valid Anagram (简单题)
题意: 给出两个字符串s和t,判断串t是否为s打乱后的串. 思路: 如果返回的是true,则两个串的长度必定相等,所有字符出现的次数一样.那么可以统计26个字母的次数来解决,复杂度O(n).也可以排序 ...
- hihoCoder 挑战赛10 #1144 : 01串
思路:这只是逻辑测试题吧,考虑周全就行了.考虑n=m的情况,n>m的情况,m>n的情况. (1)n>m的情况,0比1多几个都是行的,一共有m个“01”,后面补足够多个零即可. (2) ...
- python内存泄露的诊断(转)
本篇文章非原创,转载自:http://rstevens.iteye.com/blog/828565 . 对于一个用 python 实现的,长期运行的后台服务进程来说,如果内存持续增长,那么很可能是有了 ...