传一维数组传值

$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. vue多个组件的过渡

    <transition name="component-fade" mode="out-in"> <component v-bind:is=& ...

  2. Android 应用监听自身卸载，弹出用户反馈调查

    监听卸载情景和原理分析 1,情景分析 在上上篇博客中我写了一下NDK开发实践项目,使用开源的LAME库转码MP3,作为前面几篇基础博客的加深理解使用的,但是这样的项目用处不大,除了练练NDK功底.这篇 ...

  3. 使用COCOStudio中各种资源

    UI Editor: 先把项目导出的json和资源文件放到TestGame项目的Resource目录中 1. 在HelloWorldScene.cpp顶部添加引用#include "coco ...

  4. Lucene——索引过程分析Index

    Lucene索引过程分为3个主要操作步骤:将原始文档转换成文本.分析文本.将分析好的文本保存至索引中 一.提取文本和创建文档 从 pdf.word等非纯文本格式文件中,提取文本格式信息.建立起对应的, ...

  5. 必须夸夸Sublime，大文件打开

    今天有个问题的事情日志文件67.8M大文件打开问题开始: 1.vscode必须挨批:直接就给个错误the file cannt be displayed in the editor because i ...

  6. Java运行机制及相关术语

    JVM java虚拟机(Java Virtual Machine)JVM可以实现java程序的夸平台运行,即运行的操作平台各不相同 JVM基本原理 java运行机制 编译型语言(如C.C++) 源文件 ...

  7. Hive建模

    Hive建模 1.介绍 Hive作为数据仓库,同关系型数据库开发过程类似,都需要先进行建模,所谓建模,就是对表之间指定关系方式.建模在hive中大致分为星型.雪花型和星座型.要对建模深入理解,首先需要 ...

  8. shell脚本学习（3）文件判断

    shell常用的文件判断运算符如下: -e 文件是否存在 -f  文件是否是普通文件(不是目录.设备文件.链接文件) -s  表示文件大小不为0 -d 表示文件是否是目录 -b 表示是块设备(光驱.软 ...

  9. Python输入与循环

    python while循环 while 语句: 执行语句 结束条件 #应用while输出1到11 counts = 1 while True: print("counts:", ...

  10. rosservice call ERROR:Unable to load type ... Have you typed 'make'

    you need to source in the new terminal $ source ~/catkin_ws/devel/setup.bash