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. 剑指Offer-31.整数中1出现的次数(从1到n整数中1出现的次数)(C++/Java)

    题目: 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了.A ...

  2. USACO Max Flow

    洛谷 P3128 [USACO15DEC]最大流Max Flow 洛谷传送门 JDOJ 3027: USACO 2015 Dec Platinum 1.Max Flow JDOJ传送门 Descrip ...

  3. 用OC基于数组实现循环队列

    一.简言 使用数组实现循环队列时,始终会有一个空余的位置预留着,作为一个判决队列已满的条件(当然也可以采用其他方式).在前面已经用C++介绍了基本的算法,可以去回顾一下https://www.cnbl ...

  4. PHP面试常考之设计模式——建造者模式

    建造者模式 介绍 建造者模式又名生成器模式,是一种对象构建模式.它可以将复杂对象的建造过程抽象出来(抽象类别),使这个抽象过程的不同实现方法可以构造出不同表现(属性)的对象. 建造者模式是一步一步创建 ...

  5. 数据库——SQL-SERVER练习（3）数据更新 视图

    (1).  将一个新学生记录(学号:95020:姓名:陈冬:性别:男:所在系:IS:年龄:18岁)插入到Student表中.(注意, 学号是主码不允许重复,一个学号只能插入一次,学号是5位数,不要用书 ...

  6. opencv Ｍat基础

    Mat Mat由两部分构成 matrix header pointer to the matrix containing the pixel values Mat is basically a cla ...

  7. 2018-8-10-win10-uwp-进度条-Marquez-

    原文:2018-8-10-win10-uwp-进度条-Marquez- title author date CreateTime categories win10 uwp 进度条 Marquez li ...

  8. VS Code 快捷键 && 常用插件

    常用插件    分类 插件名称 说明 开发 C# C#语言 C# Extensions C#扩展功能(添加类,接口,智能提示) C# XML Documentation Comments 代码添加注释 ...

  9. 二维码生成 Gma.QrCodeNet （目前测试支持.net4.0及以上，但vs版本2010不可以 NuGet中搜索不到程序包）

    1.添加程序包 2.生产二维码方法 #region 二维码 /// <summary> /// 生成二维码 /// </summary> /// <param name= ...

  10. Java生鲜电商平台-深入订单拆单架构与实战

    Java生鲜电商平台-深入订单拆单架构与实战 Java生鲜电商中在做拆单的需求,细思极恐,思考越深入,就会发现里面涉及的东西越来越多,要想做好订单拆单的功能,还是相当有难度, 因此总结了一下拆单功能细 ...