vue.js 怎样刷新修改页面中数据? 下面本篇文章给大家介绍一下 vue 刷新修改页面中数据的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
Vue 刷新修改页面中数据的方法
因为 Vue 对象一旦生成之后, 如果只是修改 Vue 对象中的数据, 在页面上是不会自动更新的, 得用 Vue.set() 函数来进行修改. 函数格式为:
Vue.set(data,'para','value')
其中 data 为 Vue 创建时传输的 data 对象名, 后面两个参数分别是 data 对象中的变量名称与值
页面初始化代码:
- <script type="text/javascript" charset="utf-8">
- mui.init();
- var data = {
- dx: 1400,
- wcyj: 0,
- jj: 0,
- tcbl: 0,
- tcje: 0,
- total: 0
- };
- $(document).ready(function() {
- var v = new Vue({
- el: '#result',
- data: data
- })
- })
- </script>
需要用 JS 对 Vue 模板中的变量进行修改的代码:
- <script type="text/javascript">
- function calc() {
- $("#result").show();
- yj = $("#yeji").val();
- Vue.set(data, 'wcyj', yj);
- if(yj <40000) {
- Vue.set(data, 'tcbl', 0.04);
- Vue.set(data, 'jj', 0);
- } else if(yj < 80000) {
- Vue.set(data, 'tcbl', 0.05);
- Vue.set(data, 'jj', 400);
- } else if(yj < 120000) {
- Vue.set(data, 'tcbl', 0.06);
- Vue.set(data, 'jj', 1000);
- } else {
- Vue.set(data, 'tcbl', 0.07);
- Vue.set(data, 'jj', 1500);
- }
- data.tcje = (yj * data.tcbl).toFixed(1);
- data.total = (parseFloat(data.tcje) + parseFloat(data.dx) + parseFloat(data.jj));
- }
- </script>
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17191.html