vue使用JavaScript的运算方式

代码如下:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js 使用 javascript </title>

    <script src="vue.js"></script>

</head>

<style>

    .color_1{color: red;}

    .color_2{color: blue;}

</style>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <h1>{{num}}</h1>

    <h2 v-once="">{{num}}:v-once</h2>

    {{num+1}}<!--表达式-->

    <h1 :class="'color_'+num">{{title}}</h1>

    <input type="text" v-model="num">

    <input type="radio" v-model="num" value="1">color_1

    <input type="radio" v-model="num" value="2">color_2

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        data:{

            title:'',

            num:1,

        }

    });

</script>

</body>

</html>

vue 使用JavaScript表达式的更多相关文章

  1. 006——VUE中的内容与属性中使用javascript表达式的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. VUE基础插值表达式

    vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...

  3. 第四章：Javascript表达式和运算符

    表达式是javascript中的一个短语,javascript解释器会将其计算出一个结果.程序中常用量是最简单的一类表达式就是变量.变量名也是一种简单的表达式,它的值就是赋值给变量的值.复杂的表达式是 ...

  4. 第一百节，JavaScript表达式中的运算符

    JavaScript表达式中的运算符 学习要点: 1.什么是表达式 2.一元运算符 3.算术运算符 4.关系运算符 5.逻辑运算符 6.*位运算符 7.赋值运算符 8.其他运算符 9.运算符优先级 E ...

  5. Omi v1.0.2发布 - 正式支持传递javascript表达式

    原文地址:https://github.com/AlloyTeam/omi/ 写在前面 Omi框架可以通过在组件上声明 data-* 把属性传递给子节点. Omi从设计之初,就是往标准的DOM标签的标 ...

  6. JavaScript表达式--掌握最全的表达式，一切尽在掌握中，让表达不再是难事

    一.JavaScript表达式: 算术表达式: 字符串表达式: 关系(比较)表达式: 逻辑表达式 二.JavaScript运算符: ●什么是表达式--表达式是产生一个结果值的式子,常量,变量,运算符. ...

  7. 好客租房13-在jsx中使用javascript表达式

    嵌入js表达式 数据存储在js中 语法{javascript表达式} 注意语法中是单大括号 不是双大括号 //导入react     import React from "react&quo ...

  8. Vue知识整理6：JavaScript表达式

    可在vue中运用js表达式,完成数据的运算(包括三元运算).比较等操作.

  9. vue 解析时表达式闪烁的问题

    现象: 在使用 vuejs.angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁. 原因: 由于 JavaScript 去操作DO ...

随机推荐

  1. 大学ACM学习笔记

    高斯消元 该来的总会来的系列 int gauss() { for(int i=1;i<=n;i++)//按照列来枚举,当前之前i-1列全消完了 { int k=i; for(int j=i+1; ...

  2. python--基础知识点梳理（一）数据类型、迭代生成装饰器、函数

    可变数据类型和不可变数据类型有哪些? # 可变数据类型:列表.字典.集合 # 不可变数据类型:数字.元祖.字符串 常见数据结构 # 栈(stack)--先进后出. 队列(queue)-先进先出.链表( ...

  3. kindEditor 修改上传图片的路径

    压缩过的js类似

  4. Sql ----- sqlserver 中的if 判断 case... when

    与查询放到一块使用: 语法: select case when 范围条件 then 产生的结果 when 范围条件 then 产生的结果 else 不是以上范围产生的结果 end from 表名 个人 ...

  5. 手写SpringMVC实现过程

    1. Spring Boot,Spring MVC的底层实现都是Servlet的调用. 2. Servlet的生命周期里面首先是类的初始化,然后是类的方法的调用,再次是类的销毁. 3. 创建一个spr ...

  6. Shell（1）---变量

    Shell(1)---变量 初衷:学习shell的目的很简单,自己经常在linux服务器上做各种操作,而且基本上是一些相同的命令操作,所以就想通过shell脚本来启动就行,能够节省一定的开发时间,提高 ...

  7. Python笔记：设计模式之代理模式

    代理通常就是一个介于寻求方和提供方之间的中介系统.其核心思想就是客户端(寻求方)没有直接和提供方(真实对象)打交道,而是通过代理对象来完成提供方提供的资源或操作. 代理其实就是封装实际服务对象的包装器 ...

  8. SQLserver创建用户和给用户权限(学)

    数据库基础知识:http://blog.csdn.net/u014600432/article/details/39645701 在SQL Server中创建用户角色及授权(使用SQL语句):http ...

  9. RESTFul&HTTP GET简介

    RestApi:https://www.cnblogs.com/springyangwc/archive/2012/01/18/2325784.html RESTFul API设计指南:http:// ...

  10. LeetCode题解002：两数相加

    两数相加 题目 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字 如果,我们将这两个数相加起来,则会返回一个新的链表 ...