vue保留两位小数是怎样的呢？下面就让我们一起来了解一下吧：
vue保留两位小数是可以直接运用toFixed（）方法的，toFixed（）方法属于计算机语言，也就是可以将Number四舍五入为指定小数位数的数字。
具体操作代码示例如下：
methods: {
// 截取当前数据到小数点后两位
numFilter(value) {
const realVal = parseFloat(value).toFixed(2);
return realVal;
},
},
拓展：
vue是什么？
这里的vue一般来说就是Vue.js，Vue本身是属于一套用来构建用户界面的渐进式JavaScript框架。 它与其它的大型框架有所区别，Vue被设计成能够自底向上逐层应用。
此外，Vue的核心库一般是只关注视图层的，并且也很容易学习，也容易与其它库或是已有项目进行整合。当然，Vue也能够驱动采用单文件组件与Vue生态系统支持的库开发的复杂单页应用。其目标也就是通过尽可能简单的API实现响应的数据绑定与组合的视图组件。
而vue的语言特点主要是易用、灵活、性能。
1、易用
一般来说，在有HTML、CSS、JavaScript的基础上，这个是很容易上手的。
2、灵活
vue本身具有简单小巧的核心，渐进式技术栈，能够用于应付绝大部分功能的运用。
3、性能
vue具有20kb min+gzip的运行大小，以及超快的虚拟 DOM ，当然其优化也是很不错的优化。
以上就是小编的分享了，希望能够帮助到大家。
从零开始Vue基础教程
2013年，在Google工作的尤雨溪，开发出了一款轻量Javascript框架，最初命名为Seed，同年12月，更名为Vue，一经推出发展迅速，如今已成为最时髦和炙手可热前端框架，在Github上获得了超过十万的Star，国内许多知名公司都使用Vue作为前端开发工具，例如饿了么、美团等，很多公司的招聘要求都会把会使用vue作为加分项。
Vue的作者 - 尤雨溪
001-Vue的定位是什么？
Vue是一个Javascript框架，类似的框架有React，Angular等等，所谓框架就是一个比较大型的库，使用它能让基于网页的前端应用程序开发起来更加方便。相对于完全采用原生JavaScript代码来编写前端代码而言，使用框架的代码量更少，开发效率也更高。
需要注意的是，Vue并非UI框架，它的定位与Bootstrap、Frozen UI这一类专注于页面呈现的框架不是一回事，或者说，UI框架关注点在HTML，而Vue这一类框架关注点是JavaScript。Vue可以跟很多UI框架搭配使用，比如说Bootstrap（vueBootstrap），和一些专门与Vue配合的例如饿了吗团队开发的element-ui等等。
002-实现第一个VueJS应用.html
1.下载Vue: https://unpkg.com/vue/dist/vue.js
2.将vue.js拷贝到任意一个目录（工作目录）
3.在同一个目录下用编辑软件（随便什么都行，记事本都可以）新建一个文件，输入以下代码：
<script src="vue.js"></script> <div id="app"> <p>{{title}}</p> </div> <script> new Vue({ el:"#app", data:{ title: "Hello World!" } });
<script src="vue.js"></script> <div id="app"> <input type="text" v-on:input="changeTitle"> <p>{{title}}</p> </div> <script> new Vue({ el: "#app", data: { title: "Hello World!" }, methods: { changeTitle:function (event) { this.title = event.target.value; } } }); </script>
<script src="vue.js"></script> <div id="app"> <!-- 注意此处并没有调用Vue模板，而是调用了一个函数 --> <p>{{sayHello()}}</p> </div> <script> new Vue({ el: "#app", data: { title: "Hello World!" }, methods: { //此处sayHello是一个方法（函数），但它返回的内容被传送到模版里去了 sayHello:function (event) { return 'Hello!'; } } }); </script>
<script src="vue.js"></script> <div id="app"> <p>{{sayHello()}}</p> </div> <script> new Vue({ el: "#app", data: { title: "Hello World!" }, methods: { sayHello:function (event) { //注意此处，return的是Hello World! //原生的JS是不允许这么调用的，Vue在中间层做了调剂 return this.title; } } }); </script>
<script src="vue.js"></script> <div id="app"> <!-- 注意：此处不能用<a href="{{link}}"> 这种形式来传递超链接值，只能用v-bind绑定并设置href的值 --> <p>{{sayHello()}} - <a v-bind:href="link">Baidu</a> </p> </div> <script> new Vue({ el: "#app", data: { title: "Hello World!", link:"http://baidu.com" }, methods: { sayHello:function () { return this.title; } } }); </script>
<script src="vue.js"></script><div id="app"> <!-- 注意此处的v-once --> <h1 v-once>{{title}}</h1> <p>{{sayHello()}}</p></div><script> new Vue({ el: "#app", data: { title: "Hello World!", }, methods: { sayHello:function () { this.title = 'Hello'; return this.title; } } });</script>
<script src="vue.js"></script><div id="app"> <!-- 注意此处的v-once --> <h1 v-once>{{title}}</h1> <p>{{sayHello()}}</p> <!-- 注意：v-html指令让finishedLink以渲染后的HTML格式输出，而不是纯文本 如果以花括号{{finishedLink}} 来表示的话，将会是一个HTML形式的纯文本。 --> <p v-html = "finishedLink" ></p></div><script> new Vue({ el: "#app", data: { title: "Hello World!", finishedLink:'<a href="http://baidu.com">Baidu.com</a>', }, methods: { sayHello:function () { this.title = 'Hello'; return this.title; } } });</script>
<script src="vue.js"></script><div id="app"> <p>I am {{name}}</h1> <p>I am {{age}} years old.</p></div><script> new Vue({ el: "#app", data: { name: "Rockage", age: "40", } });</script>
<script src="vue.js"></script><div id="app"> <p>I am {{name}}</p> <p>I am {{age * 3}} years old.</p></div><script> new Vue({ el: "#app", data: { name: "Rockage", age: "40", } });</script>
<script src="vue.js"></script><div id="app"> <p>The Random Number is : {{sayRnd()}}</p></div><script> new Vue({ el: "#app", methods: { sayRnd: function () { // random_number = Math.random(); // 产生一个0到1的随机数 // random_number = random_number.toFixed(2) //保留两位小数 // 产生一个1到100的随机数 random_number = Math.floor(Math.random() * (100 - 1 1)) 1 return random_number; } } });</script>
<script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script><div id="app"> <img v-bind:src = "url"></div><script> new Vue({ el: "#app", data: { url: "http://img.mp.itc.cn/upload/20170217/1f650c2645c541ad8cc70842d7d0bbe5_th.jpeg" } });</script>
<script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script><div id="app"> Name <input type = "text" v-bind:value = "default_name" /></div><script> new Vue({ el: "#app", data: { default_name: "Hua Yang" } });</script>
<script src="vue.js"></script><div id="app"> <button v-on:click="increase">Click Me</button> <p>{{ counter}}</p></div><script> new Vue({ el: "#app", data: { counter: 0, x: 0, y: 0 }, methods: { increase: function () { this.counter ; } }, });</script>
<script src="vue.js"></script><div id="app"><p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}</p></div><script>new Vue({ el: "#app", data: { counter: 0, x: 0, y: 0 }, methods: { updateCoordinates: function (event) { this.x = event.clientX; this.y = event.clientY; } },});</script>
<script src="vue.js"></script><div id="app"> <!-- 请注意, 调用increase时增加了两个参数 --> <button v-on:click="increase(2,$event)">Click Me</button> <p>{{ counter}}</p></div><script> new Vue({ el: "#app", data: { counter: 0, x: 0, y: 0 }, methods: { // increase 函数用step和event接收参数 increase: function (step,event) { this.counter = step; } }, });</script>
HTML部分：
<span v-on:mousemove = "dummy">DEAD SPOT</span>
JS部分：
dummy: function(){ event.stopPropagation();}
以上代码确保事件不会传播给绑定有这个属性的SPAN上，当然，我们还有更简单的方法，就是使用事件修饰符，使用stop修饰符即可实现这个目的：
<script src="vue.js"></script><div id="app"> <p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}} <!-- 请注意下面这个SPAN绑定的事件mousemove 采用了.stop修饰符，表示此元素的mousemove事件不做任何处理 --> - <span v-on:mousemove.stop = "">DEAD SPOT</span> </p></div><script> new Vue({ el: "#app", data: { counter: 0, x: 0, y: 0 }, methods: { updateCoordinates: function (event) { this.x = event.clientX; this.y = event.clientY; } }, });</script>
<script src="vue.js"></script><div id="app"> <input type = "text" v-on:keyup.enter="alertMe" /></div><script> new Vue({ el: "#app", data: { counter: 0, x: 0, y: 0 }, methods: { alertMe: function () { alert("Alert!"); } }, });</script>
<script src="vue.js"></script><div id="app"> <button v-on:click="alertMe">Show Alert</button></div><script> new Vue({ el: "#app", data: { counter: 0, x: 0, y: 0 }, methods: { alertMe: function () { alert("You Clicked me!"); } }, });</script>
<script src="vue.js"></script><div id="app"> <input v-on:keydown = "myValue = $event.target.value" type="text"/> <p>{{myValue}}</p></div><script> new Vue({ el: "#app", data: { myValue: '' } });</script>
<script src="vue.js"></script><div id="app"> <input v-on:keydown.enter = "myValue = $event.target.value" type="text"/> <p>{{myValue}}</p></div><script> new Vue({ el: "#app", data: { myValue: '' } });</script>
<script src="vue.js"></script><div id="app"> <!-- 此处取消了事件函数，直接用counter 代替 --> <button v-on:click="counter ">Click Me</button> <!-- 此处直接修改模板counter的值 --> <p>{{ counter * 2}}</p> <!-- 此处是一个三元表达式，用以判断counter的值 --> <p>{{ counter * 2 > 10 ? 'Greate than 10' : 'Smaller than 10'}}</p></div><script> new Vue({ el: "#app", data: { counter: 0 } });</script>
<script src="vue.js"></script><div id="app"> <input type = "text" v-model = "name"> <p>{{name}}</p></div><script> new Vue({ el: "#app", data: { name: '' } });</script>
<script src="vue.js"></script><div id="app"> <button v-on:click="counter1 ">Increase Counter 1</button> <button v-on:click="counter1--">Decrease Counter 1</button> <button v-on:click="counter2 ">Increase Counter 2</button> <p>Counter:{{counter1}} | {{counter2}}</p> <!-- 注意两种调用方法是不同的 --> <p>Counter 1 Result: {{result()}} | {{output}}</p></div><script> new Vue({ el: "#app", data: { counter1: 0, counter2: 0 }, computed: { output: function () { console.log('Here is Computed') return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5" } }, methods: { result: function () { console.log('Here is Methods') return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5" } } });</script>
<!-- 作业3问题：响应式属性 - 作业1 --><script src="vue.js"></script><div id="app"> <button v-on:click="value = 5">Add 5</button> <button v-on:click="value = 1">Add 1</button> <p>{{result}}</p></div><script> new Vue({ el: "#app", data: { value: 0, }, computed: { result: function () { return this.value == 37 ? "Done" : "Not there yet" } } });</script>
<script src="vue.js"></script><div id="app"> <button v-on:click="value = 5">Add 5</button> <button v-on:click="value = 1">Add 1</button> <p>Current Value:{{value}} </p> <p>{{result}}</p></div><script> new Vue({ el: "#app", data: { value: 0 }, computed: { result: function () { return this.value == 37 ? "Done" : "Not there yet" } }, watch: { result: function () { //watch可以监听computed里的属性 var vm = this; setTimeout(function () { vm.value = 0 // 但无法修改computed里定义的属性，即如果写成 vm.result = "XXX" 则程序会报错 }, 5000) } } });</script>
<style> .demo { width: 100px; height: 100px; background-color: gray; display: inline-block; margin: 10px; } .red { background-color: red; } }</style><script src="vue.js"></script><div id="app"> <div class="demo" @click="attachRed = !attachRed" :class="{red: attachRed}" ></div></div><script> new Vue({ el: "#app", data: { attachRed: false } });</script>
<style> .demo { width: 100px; height: 100px; background-color: gray; display: inline-block; margin: 10px; } .red { background-color: red; } .blue { background-color: blue; }</style><script src="vue.js"></script><div id="app"> <div class="demo" @click="attachRed = !attachRed" :class="divClasses" ></div></div><script> new Vue({ el: "#app", data: { attachRed: false }, computed: { divClasses: function () { return { red: this.attachRed, blue: !this.attachRed } } } });</script>
<!-- 033-CSS类动态样式-使用命名 --><style> .demo { width: 100px; height: 100px; background-color: gray; display: inline-block; margin: 10px; } .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; }</style><script src="vue.js"></script><div id="app"> <div class="demo" @click="attachRed = !attachRed" :class="divClasses" ></div> <div class="demo" :class="[color,{red: attachRed}]" ></div> <hr> <!-- 此处输入框双向绑定了color属性，即键盘输入的内容会即时作为CSS类名传到HTML中去 --> <input type = "text" v-model = "color"></div><script> new Vue({ el: "#app", data: { attachRed: false, color:'green' //color属性默认为green，请注意由于双向绑定的原因，green这个字符串也会同时传递到输入框里 }, computed: { divClasses: function () { return { red: this.attachRed, blue: !this.attachRed } } } });</script>
<div class="demo" :style="{'background-color':color}"></div>
data: { color: 'grey', width: 100}
<input type="text" v-model="color">
<!-- 章节2课时34-动态设置样式（不使用CSS类） --><style> .demo { width: 100px; height: 100px; background-color: gray; display: inline-block; margin: 10px; }</style><script src="vue.js"></script><div id="app"> <div class="demo" :style="{'background-color':color}"></div> <div class="demo" :style="myStyle"></div> <hr> <input type="text" v-model="color"> <input type="text" v-model="width"></div><script> new Vue({ el: "#app", data: { color: 'grey', width: 100 }, computed: { myStyle: function () { return { backgroundColor: this.color, width: this.width 'px' } } } });</script>
<!-- 章节2课时35-用数组语法设置元素样式 --><style> .demo { width: 100px; height: 100px; background-color: gray; display: inline-block; margin: 10px; }</style><script src="vue.js"></script><div id="app"> <div class="demo" :style="{'background-color':color}"></div> <div class="demo" :style="myStyle"></div> <div class="demo" :style="[myStyle,{height: width 'px'}]"></div> <hr> <input type="text" v-model="color"> <input type="text" v-model="width"></div><script> new Vue({ el: "#app", data: { color: 'grey', width: 100 }, computed: { myStyle: function () { return { backgroundColor: this.color, width: this.width 'px' } } } });</script>
