thinkphp5控制器向+vue的data里传值
传一维数组传值
$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里传值的更多相关文章
- vue重置data里的值
this.$options.data() 这个可以获取原始的data值,this.$data 获取当前状态下的data,拷贝重新赋值一下就行了. Object.assign(this.$data, t ...
- VUE：data数据中，能被网页渲染出来的数据类型有哪些
我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...
- Vue实例data对象里允许有哪些类型数据
做项目中遇到了data赋值的问题,总结了下常用的data赋值的数据类型.之前一直不确定是否能在data里写函数,实践证明data里也是可以对函数赋值的. export default { name: ...
- vue组件之间的传值方式
一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue 组件-父组件传值给子组件
父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- Vue之组件间传值
标签: Vue Vue之父子组件传值 父向子传递通过props 子向父传递通过$emit 演示地址 代码示例如下: <!DOCTYPE html> <html lang=" ...
- vue组件之间的传值
vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
随机推荐
- CheckBox全选、取消全选
关于CheckBox全选取消全选 //全选 $("#SysAllSelectedID").click(function () { $("[name=SysCheckbox ...
- [转]开发中如何解决SQL注入的问题
Java防止SQL注入 SQL 注入简介: SQL注入是最常见的攻击方式之一,它不是利用操作系统或其它系统的漏洞来实现攻击的,而是程序员因为没有做好判断,被不法用户钻了SQL的空子,下面 ...
- intellijidea课程 intellijidea神器使用技巧 3-3 postfix
Ctrl shift A ==> postfix completion 调出postfix 方法体中 ==> for 100.fori ==>enter for循环10 ...
- 函数的返回值 return
布尔类型返回 return 0:返回假: return 1:返回真:
- <Android 基础（八）> Palette
介绍 Palette, 英文翻译,调色板,意思比较接近,Google给它的定位应该是颜色萃取器. 看下Source Code Palette , A helper class to extract p ...
- Arm启动流程解析
谈到arm的启动流程不得不说的是bootloader,但是我这篇文章主要来谈谈arm启动流程的,所以bootloader只是跟大家简介一下就ok.这篇文章我会谈到以下内容: 1.bootloader简 ...
- Mat转化为IplImage类型的方法
Mat image_mat; IplImage imgTmp = image_mat; IplImage *img = cvCloneImage(&imgTmp);
- Struts2 displaytag 导出文件为空
以一个user的查询为例,在struts.xml配置里有这个action的配置: 然后可以在UserAction.java里找到list方法这个就是无非new 一个List<User> u ...
- Linux命令之查看日志等实时文件命令（less 、tail）使用
一.less的使用 1)less 文件名,即可快速打开文件 2)相关查看搜索 3)利用键盘向上向下箭头键盘上的向上和向下箭头,点击一次向下简单,文件内容往下读取一行:点击一次向上箭头,文件内容,往上 ...
- Centos 7.0_64bit 下安装 Zabbix server 3.0服务器的安装
一.关闭selinux 修改配置文件/ etc / selinux / config,将SELINU置为禁用(disabled) vim /etc/selinux/config # This ...