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. 描述符(__get__和__set__和__delete__)

    目录 一.描述符 二.描述符的作用 2.1 何时,何地,会触发这三个方法的执行 三.两种描述符 3.1 数据描述符 3.2 非数据描述符 四.描述符注意事项 五.使用描述符 5.1 牛刀小试 5.2 ...

  2. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  3. 大话设计模式Python实现- 享元模式

    享元模式(Flyweight Pattern):运用共享技术有效地支持大量细粒度的对象. 下面是一个享元模式的demo: #!/usr/bin/env python # -*- coding:utf- ...

  4. 【Oracle】Oracle常用命令整理（持续更新中）

    一些常用的操作命令记录 SQLPlus连接 sqlplus {username}/{password}@{ip}:{port}/{sid} 创建用户 create user testuser iden ...

  5. ES5提取公共变量

    在ES5中,请求地址前缀等需要作为公共变量提出. 则需在common.js写上 Object.defineProperty(window,'base',{ value:"http://xx. ...

  6. MySQL数字类型学习笔记

    数字类型 最近在看<MySQL技术内幕:SQL编程>并做了笔记,所以本博客是一篇笔记类型博客,分享出来方便自己复习,也可以帮助他人 整型 类型 占用空间 最小值(SIGNED) 最大值(S ...

  7. 一个Web前端工程师或程序员的发展方向，未来困境及穷途末路

    如果你刚好是一个Web前端工程师,或者你将要从事web前端工作.你应该和我有同样的感慨,web前端技术到了自己的天花板,前端工作我能做多少年?3年或5年?自己的职业规划应该怎么样?收入为什么没有增长? ...

  8. 如何使用pm2一键部署node应用

    准备工作 准备一台linux服务器(本文档以阿里centos为例) 安装nodejs.git.pm2等环境 项目代码 本地已经安装用于连接 Linux 实例的工具,如 Xshell 基本流程 前两步传 ...

  9. vscode打开文件在同一个tab的问题

    当我们单击或者 cmd+鼠标左键单击打开文件时,有时候是在同一个窗口,有时候是新的窗口,这是啥样呢?   这是因为vscode有 "预览模式" , 当是预览模式时,打开的是当前窗口 ...

  10. linux远程执行ssh禁用交互方法

    ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null ${user}@${ip} ${cmd}