传一维数组传值

$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 255错误，和相关信息

    不知不觉已经注册博客一年多了,当初看见博客园的大神,自己也想像他们一样多写一些有用的,结果,,,不言而喻.在这里又感慨了一下,进入正题了.. 最近在公司服务器接触的比较多, 遇到了一个255 的问题 ...

  2. Chrome浏览器正常，IE下界面却乱了

    背景:项目实战中总会遇到一些小问题,IE特别多 Chrome浏览器页面正常,IE下界面就乱了 原因分析 1.首先想到的是代码有米有问题呢?主要指的是兼容性 2.兼容性没有问题,那我们打开IE的开发工具 ...

  3. List之Sort使用

    void TestListSort(){ List<string> st = new List<string> (); st.Add ("abcd"); s ...

  4. appium（四）交互分析

    转自:http://blog.csdn.net/Yejianyun1/article/details/56017360 一.简介 英文官网:appium官网 Appium跨平台.开源的自动化测试工具, ...

  5. appium-python-api中文文档

    来自https://wenku.baidu.com/view/533603ce581b6bd97e19eaa1.html mark,同时提供给需要使用python写脚本的童鞋们

  6. hibernate 初印象

    将要学习的内容: 1.HelloWorld a) xml b) annotation2.Hibernate 原理模拟 - 什么是 O/R Mapping 以及为什么要有 O/RMapping3.常见 ...

  7. 在 eclipse 中调出其内置的浏览器

    两种方法: 1.点击工具栏中的浏览器图标,就会在主面板中出现浏览器: 跳出一个blank页面,如下: 第二种方法:点击Window——Show view——Other 输入 "browser ...

  8. 笨办法学Python（十九）

    习题 19: 函数和变量 函数这个概念也许承载了太多的信息量,不过别担心.只要坚持做这些练习,对照上个练习中的检查点检查一遍这次的联系,你最终会明白这些内容的. 有一个你可能没有注意到的细节,我们现在 ...

  9. 洛谷 P3905 道路重建

    题目描述 从前,在一个王国中,在n个城市间有m条道路连接,而且任意两个城市之间至多有一条道路直接相连.在经过一次严重的战争之后,有d条道路被破坏了.国王想要修复国家的道路系统,现在有两个重要城市A和B ...

  10. nodejs封装的webget webpost方法

    在我之前的项目中,经常用到Nodejs通过post\get方法访问其它网站.webapi.下面是我封装的 Get.Post方法,很适合在一些web字符串收发场景使用(暂不支持文件.二进制流等传输). ...