Vue.js 极简小例：读值、样式调用、if判断、a 标签、点击事件、管道

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

1. 写法：

<template><div id="app"><!-- 三目运算符使用 ‘ok’ 的值定义在 data 中-->{{ ok ? 'YES' : 'NO' }}<br><br><!-- 修改样式 class1 设置为 true 时显示样式(页面上勾选单选框即设置为 true)--><label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"><br><div v-bind:class="{'class1': class1}">我会变背景颜色</div><!-- if判断 --><p v-if="seen"> seen 设置为true , 你就能看到我了 </p><!-- 参数在指令后以冒号指明 1.‘ v-bind:href="url" ’可以简写为：‘ :href="url"’ 2.target参数作用：新窗口打开 --> <pre><a v-bind:href="url" :target="target">这是链接</a></pre><!-- 点击事件 ‘v-on:click=’可以简写为：‘@click=’ --><button v-on:click="doSomething">点击事件</button><br><br><!-- 管道处理数据 message 原值：this (slice方法是切片，去掉前n位字母) -->{{ message | capitalize }}</div></template><script>export default {name: 'APP-two',data () {return {ok: true,class1: false,seen: true,url: 'https://blog.csdn.net/jiangyu1013',target:'_blank',message:'this'}},methods: {doSomething: function() {alert(" 我要给小熊造一个完美世界！");}},filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(3).toUpperCase() + value.slice(1)}}
}</script><style>
.class1{background: #444;color:white
}
</style>

2. 运行效果：（seen 设置为 true ）

Vue.js 极简小例：读值、样式调用、if判断、a 标签、点击事件、管道相关推荐

Vue.js 极简小例：点击事件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div> <!-- jy_mothed ...
Vue.js 极简小例： 4 种方式样式绑定、style 的多种方式实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div id="app"> ...
Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template> <div > <p>------- ...
Vue.js 极简小例：数值计算、千米换算为米、九九乘法表、循环
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template><div id="app"> ...
天鸟技术中台-建设过程-日常经验1：标准、规范、约定、极简、可读、单一职责、自动化
1.标准.规范.约定.极简.可读技术中台,以模块来划分,不同模块,代码总体一致. 因为,中台本来就是要解决类似问题. 不同模型,主要还是CRUD,第1阶段,只考虑not core非核心业务. 核心业 ...
《Node.js 极简教程》东海陈光剑
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. https://nodejs. ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
h5+js调取相机做取景框_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

Vue.js 极简小例：读值、样式调用、if判断、a 标签、点击事件、管道

Vue.js 极简小例：读值、样式调用、if判断、a 标签、点击事件、管道相关推荐

最新文章

热门文章