传一维数组传值

$array=['id'=>40,"cat_name"=>"明星产品"];

$MenuCats_info=json_encode($array,JSON_UNESCAPED_UNICODE);

$this->assign([

    'MenuCats_info'=>$MenuCats_info,

]);

return view('index');

html里

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

	<script type="text/javascript" src="__STATIC__/vue/vue.js"></script>

	<script type="text/javascript" src="__STATIC__/vue/node_modules/axios/dist/axios.js"></script>

	<style type="text/css">

		.success{

			color:green;

		}

		.error{

			color:red;

		}

	</style>

</head>

<body>

<div id="vue">

	<li v-for="v in news">

		<span :class="v.status?'success':'error'">{{v.title}}</span>

		<button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>

		<button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>

	</li>

	{{MenuCats_info.cat_name}}

</div>

</body>

<script type="text/javascript">

    var app = new Vue({

        el: "#vue",

        data:{

            news:[

                {title:'haha',status:true},

                {title:"hehe",status:true}

            ],

            //接收值 |raw 不转义输出

            MenuCats_info:JSON.parse('{$MenuCats_info|raw}'),

        }

    });

</script>

</html>

效果:打印

明星产品

传二维数组:

php里:

$array=array(

    ['id'=>35,"cat_name"=>"吐司面包"],

    ['id'=>40,"cat_name"=>"明星产品"]

);

$MenuCats_info=json_encode($array,JSON_UNESCAPED_UNICODE);

$this->assign([

    'MenuCats_info'=>$MenuCats_info,

]);

return view('index');

html里:

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

	<script type="text/javascript" src="__STATIC__/vue/vue.js"></script>

	<script type="text/javascript" src="__STATIC__/vue/node_modules/axios/dist/axios.js"></script>

	<style type="text/css">

		.success{

			color:green;

		}

		.error{

			color:red;

		}

	</style>

</head>

<body>

<div id="vue">

	<li v-for="v in news">

		<span :class="v.status?'success':'error'">{{v.title}}</span>

		<button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>

		<button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>

	</li>

	<div v-for="vv in MenuCats_info">

		{{vv.cat_name}}

	</div>

</div>

</body>

<script type="text/javascript">

    var app = new Vue({

        el: "#vue",

        data:{

            news:[

                {title:'haha',status:true},

                {title:"hehe",status:true}

            ],

            //接收值 |raw 不转义输出

            MenuCats_info:JSON.parse('{$MenuCats_info|raw}'),

        }

    });

</script>

</html>

thinkphp5控制器向+vue的data里传值的更多相关文章

  1. vue重置data里的值

    this.$options.data() 这个可以获取原始的data值,this.$data 获取当前状态下的data,拷贝重新赋值一下就行了. Object.assign(this.$data, t ...

  2. VUE：data数据中，能被网页渲染出来的数据类型有哪些

    我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...

  3. Vue实例data对象里允许有哪些类型数据

     做项目中遇到了data赋值的问题,总结了下常用的data赋值的数据类型.之前一直不确定是否能在data里写函数,实践证明data里也是可以对函数赋值的. export default { name: ...

  4. vue组件之间的传值方式

    一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. vue 组件-父组件传值给子组件

    父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...

  6. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  7. Vue之组件间传值

    标签: Vue Vue之父子组件传值 父向子传递通过props 子向父传递通过$emit 演示地址 代码示例如下: <!DOCTYPE html> <html lang=" ...

  8. vue组件之间的传值

    vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...

  9. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

随机推荐

  1. IIS 伪静态 脚本映射 配置方法

    首先,是IIS7.0的配置,由于Windows Server 2008操作系统默认的IIS版本为7.0,我们知道,IIS7.0与IIS6.0 核心注意的地方:先要将应用池设置为集成模式,修改OK后,再 ...

  2. 随机练习：C#实现维吉尼亚加密与解密（解密前提为已知密匙）

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. [Java][Liferay] 解决在Linux系统中liferay-ext项目无法卸载的问题

    今天遇到liferay-ext无法卸载,log中显示卸载了,但是在App Manager中依然可以看到安装过的ext,其中一个原因是webapps下面的**-ext文件夹的权限只有root才能修改,将 ...

  4. 国内外著名B2C系统介绍兼比较【收藏版】

    一.国内知名B2C系统 1.Shopex国内最大的电子商务系统,有各种辅助工具,php开发,免费但不开源,网店模板众多,较适合有淘宝店的卖家.网址:www.shopex.cn 2.ECshop免费且开 ...

  5. 浅谈JavaScript原型

    在JavaScript中,所有函数都会拥有一个叫做prototype的属性,默认初始值为“空”对象(没有自身属性的对象). 1.原型属性 如下所示,简单地定义一个函数: function foo(a, ...

  6. 102001 E

    x轴上方给你n个点,m个水平杆子, 然后q组询问,每次询问一个点,问能看到多少个点. n,q<=40000,m<=5 自闭了呀,又写了个 for(int i=1;i<(1<&l ...

  7. RESTful API设计基本原则

    REST四个基本原则:1.使用HTTP动词:GET POST PUT DELETE:2.无状态连接,服务器端不应保存过多上下文状态,即每个请求都是独立的:3.为每个资源设置URI:4.通过XML JS ...

  8. python模块详解 XML

    XML模块 XML是实现不同语言或程序之间进行数据交换的协议,和json一样. XML格式: <?xml version="1.0" encoding="UTF-8 ...

  9. Quartz .Net（定时框架）:

    Quartz .Net(定时框架): 基本说明: 说明:Quartz .Net 是一个从 Java 版的 Quartz 移植过来定时任务框架,可以实现异常灵活的定 时任务 用法: 安装 Quartz ...

  10. Azure IOT 设备固件更新技巧，看这一篇就够了

    嫌长不看版 今天为大家准备的硬菜是:在 Azure IoT 中心创建 Node.js 控制台应用,进行端到端模拟固件更新,为基于 Intel Edison 的设备安装新版固件的流程.通过创建模拟设备应 ...