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引入的方式,那种 ...
随机推荐
- python 3.6 链接mssql 进行数据操作
#!/usr/bin/env python # -*- coding: UTF-8 -*- import pymssql class MSSQL(object): ''' 对pymssql的简单封装 ...
- Hive总结
一.什么是Hive 1.Hive 由 Facebook 实现并开源 2.是基于 Hadoop 的一个数据仓库 3.可以将结构化的数据映射为一张数据库表 4.并提供 HQL(Hive SQL)查询功能 ...
- js之静态方法与实例方法
静态方法是指不需要声明类的实例就可以使用的方法. 实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法. function staticCla ...
- WHRER条件里的数据类型必须和字段数据类型一致
首先看案例: 表中字段FPHONE_IMEI是varchar类型的,主键也建立在FPHONE_IMEI 字段上,原则上只要where条件中用到了这个字段,就会走索引,这也是建立索引的目的,可事实是这样 ...
- Html编码（&#数字型）与解码小结 - 针对Puny Code（中文域名）的解码处理
学习并了解到Html编码的知识,源于工作中的产品需求.如果一个URL里面包含Puny Code(不仅仅指中文,还可能是韩文等Unicode里非英文的国家文字,本文以含中文的URL为例),而且这个URL ...
- oop编程思想
oop的编程思想:抽象.封装.继承.多态. 1.抽象: 数据抽象:类描述的对象的属性或状态 行为抽象:类描述的对象的行为或功能 举例: 时钟:Class 数据:int Hour,Minute,Seco ...
- CRUD全栈式编程架构之更精简的设计
精简的程度 ViewModel精简 服务精简 控制器精简 Index.cshmtl精简 AddOrEdit.cshtml精简 效果:最精简的情况下,只需要写Entity这一个数据库实体然后加上一些简单 ...
- Android 中间白色渐变到看不见的线的Drawable
用gradient <gradient android:startColor="#00ffffff" android:centerColor="#ffffff&qu ...
- unixbench安装及使用
unixbench 是一个用于測试 unix 系统性能的工具.也是一个比較通用的 benchmark, 此測试的目的是对类Unix 系统提供一个主要的性能指示,非常多測试用于系统性能的不同方面,这些測 ...
- 2017.11.10 web中URL和URI的区别
URI:Uniform Resource Identifier,统一资源标识符: •URL:Uniform Resource Locator,统一资源定位符: •URN:Uniform Resourc ...