传一维数组传值

$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. css画扇形按钮

    最近项目中需要制作一个扇形按钮,效果是这样的: 周围四个扇形,和中间的小圆,全是能点击的.这就需要画扇形.百度了一下,有很多文章讲了如何生成扇形,最后我借鉴了一个最简单的实现方式,使用css的clip ...

  2. 错误Cannot find module 'stylus'

    vue项目中使用stylus预处理器写css语法,老是出现 Cannot find module ‘stylus’ 的错误,鼓捣了很久,包括webstorm中配置stylus的支持,安装依赖. 终于找 ...

  3. 栅格那点儿事（四A）---栅格的显示与渲染

    栅格的显示与渲染 通过前两章的学习,应该对栅格这个东西不那么陌生了.在这一个部分,我们来看看如何展示出栅格数据最美丽的地方,在ArcGIS中栅格的显示与渲染.在进入细节之前,先来看看在ArcGIS中都 ...

  4. (WPF) ComboBox 之绑定

    1.  在UI(Xaml) 里面直接绑定数据. <Window x:Class="WpfTutorialSamples.ComboBox_control.ComboBoxSample& ...

  5. Android5.0以后，materialDesign风格的加阴影和裁剪效果

    5.0以后,materialDesign风格,出现了立体这种概念,高光,阴影,也就是Z轴,凸显层次:同时,裁剪view也变得方便简单了很多. 1,先说说阴影的实现. 方案1:在xml中设置 xml中设 ...

  6. selenium Element not found in the cache - perhaps the page has changed since it was looked up接解决

    selenium Element not found in the cache - perhaps the page has changed since it was looked up.这个问题爆出 ...

  7. Servlet是线程安全的吗？

    Servlet不是线程安全的. 要解释为什么Servlet为什么不是线程安全的,需要了解Servlet容器(即Tomcat)使如何响应HTTP请求的. 当Tomcat接收到Client的HTTP请求时 ...

  8. Python基础学习之标识符

    1.合法的Python标识符 Python标识符字符串规则和其他大部分用C编写的高级语言相似: 第一个字符必须是字母或下划线(_) 剩下的字符可以是字母和数字或下滑线 大小写敏感 标识符不能以数字开头 ...

  9. HTC vive VR设备软硬件安装+运行unity开发的VR程序

    总结在HTC vive VR开发过程中的HTC vive的安装调试 1.首先确保电脑的配置满足要求: 进入官网,测试电脑是否满足要求 链接:https://www.vive.com/us/produc ...

  10. RF脚本中的坑1： SyntaxError: invalid token

    话不多说,直接上调试脚本: 执行后${b}=8:没问题.然后${a}改成08继续: 执行后居然报错了: 经过多次尝试08或者09时,都会报SyntaxError错误:后来查阅语法,才恍然大悟:Pyth ...