传一维数组传值

$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. 微信小程序实战篇：商品属性联动选择（案例）

    本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示:   商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...

  2. Gulp工具常用插件

    gulp-uglify(js压缩) gulp-uglify安装 // npm install --save-dev gulp-uglify 已过时 npm install --save-dev jsh ...

  3. iphone 微信下浏览器中数字去除下划线

    在开发iphone应用程序的时候,safari下手机号码默认是有下划线的,通过下面的方法就可以去掉: <meta name="format-detection" conten ...

  4. R.java文件无法自动生成的问题

    如果出现R.java文件无法自动生成的问题,同时Console窗口提示下列信息: Android requires compiler compliance level 5.0 or 6.0. Foun ...

  5. tomcat的相关使用

    tomcat服务器是apache下非常优秀的一款web服务器,当今的互联网企业中90%左右的中小型企业使用的都是tomcat.tomcat在部署项目时有很多很多的解决方案,这些你都清楚吗? 1.同一个 ...

  6. oracle的数值数据类型和兼容细分类型

    Oracle存储数值类型的数据不区分int .double .float 等类型,统一使用number(p,s)来存储. 基本类型为 NUMBER(P,S) P范围1到38 S 范围 -84 到 12 ...

  7. strdup和strndup函数

    首先说明一下:这两个函数不建议使用,原因是返回内存地址把释放权交给别的变量,容易忘记释放. 一.strdup函数 函数原型 头文件:#include <string.h> char *st ...

  8. jQuery-prepend、append、before、after的区别

    举例说明,原始html代码如下: <ol> <li>List item 1</li> <li>List item 2</li> <li ...

  9. java线程详细版（未完待续）

    1. Java线程:概念与原理 一.操作系统中线程和进程的概念 现在的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一 ...

  10. IOS 搜索条制作（UITextField 封装）

    封装到 HMSearchBar.h / .m #import <UIKit/UIKit.h> @interface HMSearchBar : UITextField + (instanc ...